AngularJs SPA logout
AngularJs SPA logout
我在这里发布了更复杂的问题 AngularJs 注销操作 .但我还有另一个方面要看,我认为应该分开提问。
我有身份验证的Angualr SPA。使用持有者 JWT 令牌实现的身份验证。我用ng-route
来表达不同的观点。让我们想象一下,一个视图(使用/protected
路由、protecetedController
和protectedDataService
)包含受保护的资源,另一个视图(使用/unprotected
路由、unprotecetedController
和unprotectedDataService
)包含未受保护的资源。控制器示例代码:
(function () {
'use strict';
angular
.module('protectedCtrl',[])
.controller('protectedController', ['$location','protectedDataService', function ($location, protectedDataService) {
var vm = this;
vm.title = 'protectedController';
protectedDataService.getData().then(function (res) {
vm.values = res.data;
}, function (err) {
console.log(err);
});
}]);
})();
未受保护的控制器:
(function () {
'use strict';
angular
.module('unprotectedCtrl',[])
.controller('unprotectedController', ['$location','unprotectedDataService', function ($location, unprotectedDataService) {
var vm = this;
vm.title = 'unprotectedController';
unprotectedDataService.getData().then(function (res) {
vm.values = res.data;
}, function (err) {
console.log(err);
});
}]);
})();
如果未登录的用户转到受保护的资源(/protected
路径),他将被重定向到登录页面。但是让我们想象一下,登录用户按下注销按钮(现在我只是从浏览器本地删除我的令牌信息并重新加载页面)。如果用户在/protected
页面上,则应将其重定向到登录页面。如果他在页面上/unprotected
什么都不应该发生。我该如何实现?如何确定哪个页面在ng-view
中处于活动状态(需要身份验证或不需要)并做出有关重定向的决定?
$routeChangeStart
事件来捕获路由的更改,并使用帮助程序函数来决定是否重定向到登录页面。
在角度应用的run
块中,为不需要身份验证的路由定义一个变量,以及一个检查用户要前往的路由是否在此列表中的函数。
angular
.module('awesomeApp')
.run(function (/* inject dependencies */) {
// other code
// Define a list of routes that follow a specific rule. This example
// can be extended to provide access based on user permissions by
// defining other variables that will list routes that require the
// user to have specific permissions to access those routes.
var routesThatDoNotRequireAuthentication = ['/unprotected'];
// Check if current location is contained in the list of given routes.
// Note: the check here can be made using different criteria. For
// this example I check whether the route contains one of the
// available routes, but you can check for starting position, or other criteria.
function rootIsPresent ( route, availableRoutes ) {
var routeFound = false;
for ( var i = 0, l = availableRoutes.length; i < l; i++ ) {
routeFound = routeFound || route.indexOf(availableRoutes[i]) > -1;
}
return routeFound;
}
// And now, when the $routeChangeStart event is fired, check whether
// its safe to let the user change the route.
$rootScope.$on('$routeChangeStart', function () {
// Get the authentication status of a user
var isAuthenticated = authenticationService.isAuthenticated();
var newRoute = $location.url();
// If the route requires authentication and the user is not
// authenticated, then redirect to login page.
if ( !rootIsPresent(newRoute, routesThatDoNotRequireAuthentication) && !isAuthenticated ) {
$location.path('/login');
}
});
});
更新
似乎我误解了这个问题,并认为您的所有路由都以 /protected
或 /unprotected
为前缀(如果您考虑一下,在大多数情况下,这样做真的不是那么明智)。
在这种情况下,您可以在定义 $routeProvider
中的路由时设置一个附加属性:
$routeProvider
.when('/awesomePath', {
templateUrl: 'awesome-template.html',
controller: 'AwesomeController',
controllerAs: 'vm',
requireAuth: true // add the property that defines a route as protected or unprotected
})
现在,在您的$routeChangeStart
处理程序函数中,您可以检查用户将要访问的路由是否受到保护:
$rootScope.$on('$routeChangeStart', function () {
// Get the authentication status of a user
var isAuthenticated = authenticationService.isAuthenticated();
var newRoute = $location.url();
// In a controller, $route object has a 'current' property that
// holds route defined route properties, but here the 'current'
// property is null, so we need to get the $route object we
// need by using the $location.url()
if ( $route.routes[$location.url()].requireAuth && !isAuthenticated ) {
$location.path('/login');
}
});
因此,您无需在任何地方对路由进行硬编码。
- 这是使用html快照和谷歌获取的预期结果吗?SEO/SPA
- 在我的SPA应用程序中集成Facebook共享的问题
- 错误:$injector:modulerr模块错误(我的第一个SPA应用程序)
- 在非SPA(单页应用程序)中使用Require.js和Backbone
- 对auth.logout的Facebook事件订阅仅选择性地将用户重定向到url
- 用户使用浏览器时SPA中的问题's的后退或刷新功能
- SPA异步调用在IE 11中不起作用
- 错误:无法在“XMLHttpRequest”上执行“发送”:无法加载“文件”:AngularJS SPA
- Angular SPA中不需要的页面刷新
- MVC路由和SPA路由之间的差异
- 最轻的js/css,用于向用户提供SPA正在加载/初始化的视觉反馈
- 在AngularJs的SPA中,我如何删除“;.html”;来自我的URL
- Javascript SPA ViewModel Refactoring
- 向Hot Towel SPA添加用户身份验证登录页面
- 如何在身份验证时从静态express页面提供整个angularJS SPA
- 在Angular SPA中存储凭据
- 识别有角度的spa应用程序页面渲染结束时间
- 使用HTML5浏览器历史API的SPA中的页面刷新
- AngularJS SPA 登录页面
- AngularJs SPA logout