AngujarJS async「authenticated」check

我想根據用戶是否通過身份驗證來顯示/隱藏HTML中的元素。我的HTML是靜態的，當存在名爲session的cookie時，檢查由Ajax GET /check完成。以下作品：AngujarJS async「authenticated」check

HTML：

<div class="ng-cloak" ng-show="loggedIn()">Foo</div> 
<div class="ng-cloak" ng-hide="loggedIn()">Bar</div>

的CoffeeScript：

angular.module('app', ['ngCookies']).run ($cookies, $http, $rootScope) -> 
    if $cookies.session 
     $http.get('/check').success (data) -> $rootScope.user = data 

    $rootScope.loggedIn = -> 
     if $rootScope.user then true else false

的問題是，當用戶通過驗證後（user不爲空因此loggedIn()是真實的），有一個短週期，其中Bar仍然顯示，因爲腳本仍在等待GET /check返回（因此user仍爲空，因此loggedIn()爲false）。我該如何解決？

UPDATE：小提琴：http://jsfiddle.net/dexrN/1/（除去$cookies和更換$http與$timeout）

來源

2013-02-04 wiradikusuma

你能建立一個小提琴或普拉克？我不確定它爲什麼會同時顯示，但我有一種感覺，我們錯過了一些東西。（注意，你不需要使用loggedIn（）函數，你可以使用ng-show =「user」或ng-hide =「user」，但這不是什麼大問題。） –

@blesh我已經更新了問題與小提琴。 – wiradikusuma

@ mark-rajcok是正確的，但對我來說太冗長了。這是我最終使用，該解決方案主要介紹loggedOut()：

<div class="ng-cloak" ng-show="loggedIn()">Foo</div> 
<div class="ng-cloak" ng-show="loggedOut()">Bar</div>

的CoffeeScript：

angular.module('app', ['ngCookies']).run ($cookies, $http, $rootScope) -> 
    if $cookies.session 
     $http.get('/check') 
      .success (data) -> 
       $rootScope.user = data 
      .error -> 
       $rootScope.user = {} 
       delete $cookies.session 
    else 
     $rootScope.user = {} 

    $rootScope.loggedIn = -> $rootScope.user and $rootScope.user.username 
    $rootScope.loggedOut = -> $rootScope.user and not $rootScope.user.username

來源

2013-02-06 15:50:49 wiradikusuma

由於需要三種狀態（而不是兩個），使用（而不是NG隱藏/ NG-顯示）ng-switch接通三種狀態：未知，已登錄，未登錄。您可能需要爲此使用另一個$ scope屬性。

來源

2013-02-04 16:59:43

AngujarJS async「authenticated」check

回答

相關問題