нг-показать и нг-скрыть с помощью jwt

Я управляю аутентификацией с помощью JWT. Я пытаюсь использовать ng-hide и ng-show, чтобы показать/скрыть кнопки входа и выхода в моем nav. Это не работает. Токен сохраняется, но я не могу заставить работать показ/скрытие.

Обслуживание:

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>

jwt angularjs ng-show ng-hide
person xxthcenturyboy    schedule 14.12.2014    source источник

Ответы (1)


arrow_upward
0
arrow_downward

Вы проверили тип $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>
person David L    schedule 14.12.2014
comment
Когда я это делаю, мне приходится обновлять браузер, чтобы он мог оценить. - person xxthcenturyboy; 15.12.2014
comment
Можете ли вы предоставить небольшой работающий jsfiddle, демонстрирующий неправильное поведение? - person David L; 15.12.2014
comment
Я разобрался. Я изменил html на isAuthenticated() и контроллер на $scope.isAuthenticated = authToken.isAuthenticated. - person xxthcenturyboy; 17.12.2014
comment
Просто для пояснения, я думаю, это произошло потому, что метод isAuthenticated не оценивался при перезагрузке, но поскольку ваш контроллер теперь передает фактический метод, он оценивается, когда Angular анализирует шаблон. Мне любопытно, лучше ли это, чем использование $broadcast в вашей службе аутентификации. Это должно много проверять токен. - person steezeburger; 27.03.2016
comment
@steezeburger Я думаю, это зависит от твоей точки зрения. Внутренне зарегистрированные наблюдатели (основные угловые директивы) относительно дешевы, особенно в чем-то вроде этого, который проверяет простое логическое свойство. Кроме того, как только состояние свойства перестанет меняться, его не нужно будет постоянно переоценивать. Лично я предпринял значительные согласованные усилия, чтобы свести к минимуму вещание и излучение, насколько это возможно. Теперь я предпочитаю подходы, основанные на сильно компонентизированных директивах/компонентах, которые проталкивают значения вниз по стеку и максимально минимизируют события. - person David L; 27.03.2016
comment
@DavidL Ааа, это имеет смысл. Спасибо за ответ на мое любопытство! - person steezeburger; 27.03.2016