【问题标题】:ng-show and ng-hide with jwtng-show 和 ng-hide 与 jwt
【发布时间】:2015-02-12 11:40:32
【问题描述】:

我正在使用 JWT 管理身份验证。我正在尝试使用 ng-hide 和 ng-show 在我的导航中显示/隐藏登录和注销按钮。它不工作。令牌正在存储,但我无法让显示/隐藏工作。

服务:

angular.module('psJwtApp')
.factory('authToken', function ($window) {
  var storage = $window.localStorage;
  var cachedToken;
  var userToken = 'userToken';
  var isAuthenticated = false;

  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('psJwtApp')
.controller('HeaderCtrl', function ($scope, authToken) {
  $scope.isAuthenticated = authToken.isAuthenticated();
});

html:

 <div ng-controller="HeaderCtrl" class="header">
  <ul class="nav nav-pills pull-right">
    <li ui-sref-active="active">
      <a ui-sref="main">Home</a>
    </li>
    <li ui-sref-active="active">
      <a ui-sref="jobs">Jobs</a>
    </li>
    <li ng-hide="isAuthenticated()" ui-sref-active="active">
      <a ui-sref="login">Log In</a>
    </li>
    <li ng-show="isAuthenticated()" ui-sref-active="active">
      <a ui-sref="logout">Logout</a>
    </li>
  </ul>
  <h3 class="text-muted">psJwt</h3>
</div>

【问题讨论】:

    标签: angularjs jwt ng-show ng-hide


    【解决方案1】:

    你检查过 $scope.isAuthenticated 的类型了吗?我怀疑它已解析为布尔值,而不是函数。更新您的 html 以检查布尔值。

    <li ng-show="!isAuthenticated" ui-sref-active="active">
      <a ui-sref="login">Log In</a>
    </li>
    <li ng-show="isAuthenticated" ui-sref-active="active">
      <a ui-sref="logout">Logout</a>
    </li>
    

    【讨论】:

    • 当我这样做时,我必须刷新浏览器才能对其进行评估。
    • 你能提供一个小的、有效的 jsfiddle 来演示不正确的行为吗?
    • 我明白了。我将 html 更改为“isAuthenticated()”,将控制器更改为 $scope.isAuthenticated = authToken.isAuthenticated。
    • @steezeburger 我认为这取决于您的观点。内部注册的观察者(核心角度指令)相对便宜,特别是在检查简单布尔属性的这种情况下。此外,一旦属性状态停止变化,就不需要不断地重新评估。就个人而言,我已经做出了相当大的协同努力,以尽可能减少广播和发射。我现在更喜欢高度组件化的指令/组件驱动方法,这些方法将值下推并尽可能减少事件。
    • @DavidL 啊,这是有道理的。感谢您回答我的好奇心!
    猜你喜欢
    • 2014-12-08
    • 2014-03-27
    • 1970-01-01
    • 2014-03-19
    • 1970-01-01
    • 1970-01-01
    • 2015-01-30
    • 1970-01-01
    • 2018-02-27
    相关资源
    最近更新 更多