无法让 ng-hide 和 ng-show 使用令牌

Posted 2023-03-10

【中文标题】无法让 ng-hide 和 ng-show 使用令牌

【英文标题】：Can't get ng-hide & ng-show to work with tokens

【发布时间】：2015-04-22 14:52:37

【问题描述】：

我的问题与此类似：ng-show and ng-hide with jwt

虽然我按照user3735441的指示进行了修改，但还是无法让它们正常工作：

服务：

'use strict';

/**
 * @ngdoc service
 * @name ToDoManagerApp.authToken
 * @description
 * # authToken
 * Factory in the ToDoManagerApp.
 */
angular.module('ToDoManagerApp').factory('authToken', function($window) 
    var storage = $window.localStorage;
    var cachedToken;
    var userToken = 'userToken';
    var isAuthenticated = false;
    // Public API here
    var authToken = 
        setToken: function(token) 
            cachedToken = token;
            storage.setItem(userToken, token);
            isAuthenticated = true;
        ,
        getToken: function() 
            if(!cachedToken)
              cachedToken = storage.getItem(userToken);

            return cachedToken;
        ,
        isAuthenticated: function() 
            return !!authToken.getToken();
        ,
        removeToken: function() 
            cachedToken = null;
            storage.removeItem(userToken);
            isAuthenticated = false;

        
    ;

    return authToken;
);

控制器：

angular.module('ToDoManagerApp').controller('HeaderCtrl', function($scope, authToken) 
    $scope.isAuthenticated = authToken.isAuthenticated;

);

html：

<div ng-controller = "HeaderCtrl" class="header">
  <div class="navbar navbar-default" role="navigation">
    <div class="container">
      <div class="navbar-header">

        <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#js-navbar-collapse">
          <span class="sr-only">Toggle navigation</span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
        </button>

        <a class="navbar-brand" href="#/">ToDoManager</a>
      </div>

      <div class="collapse navbar-collapse" id="js-navbar-collapse">

        <ul class="nav navbar-nav">
          <li ui-sref-active="active">
            <a ui-sref="main">Home</a>
          </li>
          <li ng-hide="isAuthenticated()" ui-sref-active="active">
            <a ui-sref="register">Register</a>
          </li>
          <li ng-show="isAuthenticated()" ui-sref-active="active">
            <a ui-sref="logout">Logout</a>
          </li>
        </ul>
      </div>
    </div>
  </div>
</div>

我想做的是：

1 - 显示注册，在未设置令牌时隐藏注销（未经过身份验证）或 2 - 显示注销，设置令牌时隐藏注册（经过身份验证）

现在我停留在第一个状态，无论是否经过身份验证，我都看不到注销按钮。

【问题讨论】：

那么，有什么问题呢？您期望的行为是什么，您观察到的行为是什么？

我编辑了我的第一条消息。

【参考方案1】：

您正在使用ng-hide 和ng-show 访问$scope 模型。 在您的服务中，您将 isAuthenticated 设置为 false，并且从不将其设置为 True。所以你的应用卡在你的第一个状态，isAuthenticated 是假的。

【讨论】：

我确实在 setToken 中将其设置为 true ： setToken: function(token) cachedToken = token; storage.setItem(userToken, token); isAuthenticated = true; ,

你在哪里调用 setToken？

我在注册控制器中做： $http.post(url, user).success(function() alert('success', 'OK!', 'You are now registered') ; authToken.setToken(res.token); )

关注这个isAuthenticated变量，我想你会发现它没有被改变。

【参考方案2】：

我完全忘记在我的注册控制器中添加“res”，这就是它没有更新的原因：

$http.post(url, user)
            .success(function(res) 
                alert('success', 'OK!', 'You are now registered');
                authToken.setToken(res.token);
            )

【参考方案3】：

发生这种情况是因为控制器中的变量在工厂发生更改时没有更新。为了解决这个问题，我通常使用 $broadcast。所以在你的工厂里你会有这样的功能......

var broadcastValue = function() 
  $rootScope.$broadcast('IsAuthenticated');

然后，您可以在希望接收者检查变量的任何时候调用此函数。

然后在你的控制器中你会有这样的东西来接收广播

$scope.$on('IsAuthenticated', function() 
  $scope.isAuthenticated = authToken.isAuthenticated;
);

这将确保您的控制器看到值何时发生变化。

另请参阅此帖子。

$on and $broadcast in angular