Auth0

Question

我试图根据用户是否通过身份验证来隐藏导航栏中的按钮。 Auth0 已启动运行但我似乎无法在 ng-if 中使用它。

这是我的代码：

NavCtrl.js

/* global myApp*/
myApp.controller('navCtrl', function($scope, auth, store, $location){
    $scope.isActive = function(destination){
        return destination === $location.path();
    }

    $scope.login = function doAuth() {
    auth.signin({
      authParams: {
        scope: 'openid offline_access',
        device: 'Mobile device'
      }
    }, function(profile, token, accessToken, state, refreshToken) {
      // Success callback
      store.set('profile', profile);
      store.set('token', token);
      store.set('refreshToken', refreshToken);
      $location.path('/');
    }, function(error) {
      console.log("There was an error logging in", error);
    });
  };

    $scope.logout = function() {
        auth.signout();
        store.remove('token');
        store.remove('profile');
        store.remove('refreshToken');
        $location.path('/');
    };
});

app.js

var myApp = angular.module('myApp', 
                        [
                            'ngRoute',
                            'ngResource',
                            'auth0',
                            'angular-storage',
                            'angular-jwt'
                        ]);
myApp.run(function($rootScope, auth, store, jwtHelper, $location) {
    auth.hookEvents();  

  var refreshingToken = null;
  $rootScope.$on('$locationChangeStart', function() {
    var token = store.get('token');
    var refreshToken = store.get('refreshToken');
    if (token) {
      if (!jwtHelper.isTokenExpired(token)) {
        if (!auth.isAuthenticated) {
          auth.authenticate(store.get('profile'), token);
        }
      } else {
        if (refreshToken) {
          if (refreshingToken === null) {
            refreshingToken = auth.refreshIdToken(refreshToken).then(function(idToken) {
              store.set('token', idToken);
              auth.authenticate(store.get('profile'), idToken);
            }).finally(function() {
              refreshingToken = null;
            });
          }
          return refreshingToken;
        } else {
          $location.path('/login');
        }                       
      }
    }
  });    
});

myApp.config(function($routeProvider, authProvider, $httpProvider, $locationProvider,
  jwtInterceptorProvider){

  authProvider.init({
    domain: 'DOMAIN.eu.auth0.com',
    clientID: 'CLIENTID',
    loginUrl: '/'
  });  

  $routeProvider

    .when('/', {
        templateUrl: 'partials/home.html',
        controller: 'homeCtrl'
    })

    .when('/dashboard', {
        templateUrl: 'partials/dashboard.html',
        controller: 'dashCtrl',
        requiresLogin: true
    })

    .when('/capture', {
        templateUrl: 'partials/capture.html',
        controller: 'captureCtrl',
        requiresLogin: true
    })

    .when('/profile', {
        templateUrl: 'partials/profile.html',
        controller: 'profileCtrl',
        requiresLogin: true
    })

    .otherwise({redirectTo: '/'});

    $locationProvider.html5Mode({enabled:true, requireBase: false});

  jwtInterceptorProvider.tokenGetter = function(store, jwtHelper, auth) {
    var idToken = store.get('token');
    var refreshToken = store.get('refreshToken');
    // If no token return null
    if (!idToken || !refreshToken) {
      return null;
    }
    // If token is expired, get a new one
    if (jwtHelper.isTokenExpired(idToken)) {
      return auth.refreshIdToken(refreshToken).then(function(idToken) {
        store.set('token', idToken);
        return idToken;
      });
    } else {
      return idToken;
    }
  }   

  $httpProvider.interceptors.push('jwtInterceptor');
});

index.ejs

<!DOCTYPE html>
<html ng-app="myApp">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
    <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
    <link rel="icon" href="../../favicon.ico">

    <title>Birdspotter</title>

    <!-- Bootstrap core CSS -->
    <link href="lib/bootstrap/dist/css/bootstrap.css" rel="stylesheet">

    <!-- AngularJS -->
    <script  type="text/javascript" src="lib/angular/angular.js"></script>
    <script  type="text/javascript" src="lib/angular-resource/angular-resource.js"></script>
    <!-- Angular cookie wrapper library for client cookies -->
    <script type="text/javascript" src="lib/angular-cookies/angular-cookies.js"></script>
    <script  type="text/javascript" src="lib/angular-route/angular-route.js"></script>
    <!-- Angular wrapper for localStorage and sessionStorage. Defaults to ng-cookies if not available -->
    <script  type="text/javascript" src="lib/a0-angular-storage/dist/angular-storage.js"></script>
    <!-- Angular wrapper library for JWT-->
    <script  type="text/javascript" src="lib/angular-jwt/dist/angular-jwt.js"></script>

    <!-- Auth0's lock widget library -->
    <script type="text/javascript" src="https://cdn.auth0.com/js/lock-9.0.js"></script>
    <!-- Auth0's Angular SDK Library -->
    <script type="text/javascript" src="https://cdn.auth0.com/w2/auth0-angular-4.js"></script>

    <script  type="text/javascript" src="js/app.js"></script>

    <!-- Controllers -->
    <script  type="text/javascript" src="js/controllers/navCtrl.js"></script>
    <script  type="text/javascript" src="js/controllers/homeCtrl.js"></script>
    <script  type="text/javascript" src="js/controllers/dashCtrl.js"></script>
    <script  type="text/javascript" src="js/controllers/captureCtrl.js"></script>
    <script  type="text/javascript" src="js/controllers/profileCtrl.js"></script>

    <!-- Services -->
    <script  type="text/javascript" src="js/services/Api.js"></script>
  </head>

  <body>

    <!-- Navbar -->
    <nav class="navbar navbar-default navbar-default-top" ng-controller="navCtrl">
      <div class="container">
        <div class="navbar-header">
          <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
            <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="/">Birdspotter</a>
        </div>
        <div id="navbar" class="navbar-collapse collapse">
          <ul class="nav navbar-nav">
            <li ng-if="auth.isAuthenticated" "ng-class="{active: isActive('/dashboard')}"><a href="/dashboard">Dashboard</a></li>
            <li ng-if="auth.isAuthenticated" ng-class="{active: isActive('/capture')}"><a href="/capture">Capture</a></li>
          </ul>
          <ul class="nav navbar-nav navbar-right">
            <li ng-if="!auth.isAuthenticated"><a href="" ng-click="login()">Login</a></li>
            <li ng-if="auth.isAuthenticated"><a href="/profile">Profile</a></li>
            <li ng-if="auth.isAuthenticated"><a href="" ng-click="logout()">Logout</a></li>
          </ul>
        </div><!--/.nav-collapse -->
      </div>
    </nav>

    <!-- Container -->
    <div class="container">
      <div ng-view>

      </div>
    </div>
    <!-- End Container -->

     <!-- Bootstrap core JavaScript -->
     <script src="lib/jquery/dist/jquery.min.js"></script>
     <script src="lib/bootstrap/dist/js/bootstrap.min.js"></script>
  </body>
</html>

如您所见，我正在尝试在导航上执行 ng-if="auth.isAuthenticated" and ng-if="!auth.isAuthenticated" 但它似乎没有执行任何操作。

我也尝试了 console.log(auth.isAuthenticated); 看它是否有效，它总是给出 'false'。

Answer 1

您需要跟踪范围内的身份验证状态：

//NavCtrl.js
    $scope.login = function doAuth() {
      auth.signin({
        authParams: {
          scope: 'openid offline_access',
          device: 'Mobile device'
        }
      }, function(profile, token, accessToken, state, refreshToken) {
        // Success callback


        //Store the status in the scope 
        $scope.isAuthenticated = auth.isAuthenticated
        store.set('profile', profile);
        store.set('token', token);
        store.set('refreshToken', refreshToken);
        $location.path('/');
      }, function(error) {
        console.log("There was an error logging in", error);
      });
    };

在页面重新加载后处理重新验证：

//app.js
myApp.run(function($rootScope, auth, store, jwtHelper, $location) {
    auth.hookEvents();

  var refreshingToken = null;
  $rootScope.$on('$locationChangeStart', function() {
    var token = store.get('token');
    var refreshToken = store.get('refreshToken');
    if (token) {
      if (!jwtHelper.isTokenExpired(token)) {
        if (!auth.isAuthenticated) {
          auth.authenticate(store.get('profile'), token);


          //Store the status in the scope 
          $rootScope.isAuthenticated = auth.isAuthenticated
        }
      } else {
        if (refreshToken) {
          if (refreshingToken === null) {
            refreshingToken = auth.refreshIdToken(refreshToken).then(function(idToken) {
              store.set('token', idToken);
              auth.authenticate(store.get('profile'), idToken);
            }).finally(function() {
              refreshingToken = null;
            });
          }
          return refreshingToken;
        } else {
          $location.path('/login');
        }
      }
    }
  });
});

然后在 html:

<li ng-if="!isAuthenticated"><a href="" ng-click="login()">Login</a></li>

Auth0 - auth.isAuthenticated 不工作

Auth0 - auth.isAuthenticated not working

angularjs