个人中心
文章发布
退出
作者热门文章
- html - 出于某种原因，IE8 对我的 Sass 文件中继承的 html5 CSS 不友好？
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景？
26
4
我正在使用 MEAN 堆栈进行基于 token 的身份验证。当没有 token 时，即用户未登录时，我的应用程序必须显示主页、登录和注册；当有 token 时，即用户登录时，我的应用程序必须显示主页、我和注销。我的所有服务器端功能都运行良好登录、注册、注销。地址栏中的 URL 重定向和 View 渲染正确发生，但菜单项没有相应更新。只有当我点击手动刷新时，它才会更新。请帮忙!
Index.html(省略包括):
<body ng-app="app">
<div class="navbar navbar-inverse navbar-fixed-top" role="navigation" data-ng-controller="authCtrl">
<!-- data-ng-controller="authCtrl" -->
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target=".navbar-collapse">
<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="#/">Angular Restful Auth</a>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li><a ng-href="#/">Home</a></li>
<li data-ng-show="token"><a ng-href="#/me">Me</a></li>
<li data-ng-hide="token"><a ng-href="#/login">Signin</a></li>
<li data-ng-hide="token"><a ng-href="#/register">Signup</a></li>
<li data-ng-show="token"><a ng-click="logout()">Logout</a></li>
</ul>
</div><!--/.nav-collapse -->
</div>
</div>
<div class="container" ng-view="">
</div> <!-- /container -->
</body>
app.js:
'use strict';
var app = angular.module('app', ['ngRoute', 'authControllers', 'authServices']);
var authControllers = angular.module('authControllers', []);
var authServices = angular.module('authServices', []);
var options = {};
options.api = {};
//dev URL
options.api.base_url = "http://localhost:3000";
app.config(['$locationProvider', '$routeProvider',
function($location, $routeProvider) {
$routeProvider.
when('/', {
templateUrl: 'partials/home.html',
controller: 'authCtrl'
}).
when('/login', {
templateUrl: 'partials/signin.html',
controller: 'authCtrl'
}).
when('/register', {
templateUrl: 'partials/signup.html',
controller: 'authCtrl'
}).
when('/me', {
templateUrl: 'partials/me.html',
controller: 'authCtrl'
}).
otherwise({
redirectTo: '/'
});
}]);
app.config(['$httpProvider', function ($httpProvider) {
$httpProvider.interceptors.push('TokenInterceptor');
}]);
app.run(function($rootScope, $location, $window, AuthenticationService) {
$rootScope.$on("$routeChangeStart", function(event, nextRoute, currentRoute) {
//redirect only if both isAuthenticated is false and no token is set
if (nextRoute != null && nextRoute.access != null && nextRoute.access.requiredAuthentication
&& !AuthenticationService.isAuthenticated && !$window.sessionStorage.token) {
$location.path("/login");
}
});
});
authControllers.js:
authControllers.controller('authCtrl', ['$scope', '$location', '$window', 'UserService', 'AuthenticationService',
function authCtrl($scope, $location, $window, UserService, AuthenticationService) {
//Admin User Controller (login, logout)
$scope.logIn = function logIn(username, password) {
if (username !== undefined && password !== undefined) {
UserService.logIn(username, password).success(function(data) {
AuthenticationService.isLogged = true;
$window.sessionStorage.token = data.token;
$location.path("/me");
}).error(function(status, data) {
console.log(status);
console.log(data);
});
}
}
$scope.token = $window.sessionStorage.token;
$scope.me = function() {
UserService.me(function(res) {
$scope.myDetails = res;
}, function() {
console.log('Failed to fetch details');
$rootScope.error = 'Failed to fetch details';
})
};
$scope.logout = function logout() {
if (AuthenticationService.isAuthenticated) {
UserService.logOut().success(function(data) {
AuthenticationService.isAuthenticated = false;
delete $window.sessionStorage.token;
$location.path("/");
}).error(function(status, data) {
console.log(status);
console.log(data);
});
}
else {
$location.path("/login");
}
}
$scope.register = function register(username, password, passwordConfirm) {
if (AuthenticationService.isAuthenticated) {
$location.path("/me");
}
else {
UserService.register(username, password, passwordConfirm).success(function(data) {
$location.path("/login");
}).error(function(status, data) {
console.log(status);
console.log(data);
});
}
}
}]);
最佳答案
$scope.token = $window.sessionStorage.token;
此字符串不会将 token 绑定(bind)到存储属性。您应该每次更新范围变量，如果您不在摘要循环中，则显式调用 apply。
关于javascript - AngularJS 路由不更新菜单项，但正确加载 url 和 View ，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/33324023/
26
4
0
我是一名优秀的程序员,十分优秀！