我试图隐藏导航栏中的按钮，具体取决于用户是否经过身份验证。 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);来查看它是否有效，并且它总是会给出错误的＆＃39;。
答案 0 :(得分：2)
您需要使用范围跟踪身份验证状态：
//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>