Question

我希望在HTML中显示/隐藏元素，具体取决于用户是否经过身份验证。我的HTML是静态的，当有一个名为GET /check的cookie时，由Ajax session进行检查。以下作品：

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的短时间段，因为脚本仍在等待{{1要返回（所以GET /check仍为null，因此user为false）。我该如何解决这个问题？

更新：小提琴：http://jsfiddle.net/dexrN/1/（已删除loggedIn()并将$cookies替换为$http）

Answer 1

由于您需要三个状态（而不是两个），请使用ng-switch（而不是ng-hide / ng-show）来启用三种状态：未知，已登录，未登录。您可能需要使用另一个$ scope属性。

Answer 2

@ 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

AngularJS异步“身份验证”检查

2 个答案: