NG-展示和NG-隐藏与智威汤逊 [英] ng-show and ng-hide with jwt

问题描述

我管理的认证与智威汤逊。我试图用NG-隐藏和NG-显示，以显示我的资产净值/隐藏登录和注销按钮。它不工作。令牌被存储，但我无法得到显示/隐藏工作。

服务：

  angular.module（'psJwtApp'）
.factory（'的authToken'，函数（$窗口）{
  VAR存储= $ window.localStorage;
  VAR cachedToken;
  VAR userToken ='userToken';
  VAR isAuthenticated = FALSE;  VAR的authToken = {
    setToken：功能（标记）{
      cachedToken =记号。
      storage.setItem（userToken，令牌）;
      isAuthenticated = TRUE;
    }，
    为gettoken：功能（）{
      如果（！cachedToken）
        cachedToken = storage.getItem（userToken）;      返回cachedToken;
    }，
    isAuthenticated：功能（）{
      返回!! authToken.getToken（）;
    }，
    removeToken：功能（）{
      cachedToken = NULL;
      storage.removeItem（userToken）;
      isAuthenticated = FALSE;
    }
  };  返回的authToken;
}）;
 

控制器：

  angular.module（'psJwtApp'）
.controller（'HeaderCtrl'，函数（$范围的authToken）{
  $ scope.isAuthenticated = authToken.isAuthenticated（）;
}）;
 

HTML

 ＆LT; D​​IV NG控制器=HeaderCtrl级=头＆GT;
  ＆LT; UL类=净值资产净值药丸右拉＆GT;
    ＆LT;李UI的SREF主动=活动＆GT;
      ＆LT;一个UI的SREF =主＆GT;家庭和LT; / A＆GT;
    ＆LT; /李＆GT;
    ＆LT;李UI的SREF主动=活动＆GT;
      ＆LT;一个UI的SREF =工作＆GT;工作＆LT; / A＆GT;
    ＆LT; /李＆GT;
    ＆LT;李NG隐藏=isAuthenticated（）UI-SREF主动=活动＆GT;
      ＆LT;一个UI的SREF =登录＆GT;登录上述＆lt; / A＆GT;
    ＆LT; /李＆GT;
    ＆LT;李NG秀=isAuthenticated（）UI-SREF主动=活动＆GT;
      ＆LT;一个UI的SREF =注销＆GT;注销＆LT; / A＆GT;
    ＆LT; /李＆GT;
  ＆LT; / UL＆GT;
  ＆LT; H3类=TEXT-静音＆GT; psJwt＆LT; / H3 GT＆;
＆LT; / DIV＆GT;
 

解决方案

你检查$ scope.isAuthenticated的类型？我怀疑它解析为一个布尔值，不是一个函数。更新HTML要检查的布尔值。

 ＆LT;李NG秀=！isAuthenticatedUI-SREF主动=活动＆GT;
  ＆LT;一个UI的SREF =登录＆GT;登录上述＆lt; / A＆GT;
＆LT; /李＆GT;
＆LT;李NG秀=isAuthenticatedUI-SREF主动=活动＆GT;
  ＆LT;一个UI的SREF =注销＆GT;注销＆LT; / A＆GT;
＆LT; /李＆GT;
 

I'm managing authentication with JWT. I'm trying to use ng-hide and ng-show to show/hide login and logout buttons in my nav. It's not working. The token is being stored, but I'm unable to get the show/hide to work.

Service:

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;
});

Controller:

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>

解决方案

Have you checked the type of $scope.isAuthenticated? i suspect that it has resolved to a boolean, not a function. Update your html to check against the boolean value.

<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>

这篇关于NG-展示和NG-隐藏与智威汤逊的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！