AngularJS中的身份验证
欢迎大家指导与讨论 : ）
一、 身份验证的意义
首先呢，网络应用的身份验证的意图在于：保护网站中的重要资源。基于某些原因这些资源并不能公开，比如付费资源(交过钱的用户才能上的网络课程)，或者一些管理功能。其次，在AngularJS中推荐使用server来实现验证功能，因为服务是单例，并且全局可注入使用。
二. 1、 客户端身份验证——保护API访问资源
如果想要对一个会发送受保护的API请求(例如一个服务器可能返回401状态的API请求)的路由进行保护，但又希望可以正常地加载页面，可以简单地通过拦截器来实现
app.config(function($httpProvider){ var interceptor = function($q, $rootScope, Auth){ return { 'response': function(resp){ if(resp.config.url == 'api/login'){ Anth.setToken(resp.data.token); } return resp } 'responseError': function(rejection){ switch(rejection){ case: 401: //...; break; case: 402: //...; break; } } } } })
二. 2、 客户端身份验证——使用路由定义受保护资源
首先我们需要四样工具。1、 angular常量constant. 2、 $routerProvider配置为每个路由配置权限. 3、 创建一个能操作cookie并判断是否有权限的服务. 4、 $rootScope对路由的监听
举个简单的例子~ 一天风和日丽， 您要去参观一个藏有各种各样并且价值连城的收藏品的博物馆(用户要进入带有各种各样资源的站点)。博物馆里面呢，有许多不同的展区(站点里不同的路由视图)，每个展区都有相应的等级，比如说宝石展区等级是VIP9以上的游客才能进去，而猎物展区等级是VIP2以上的游客就能进去参观了(每个路由配置相应的权限)。而每个游客，在进入博物馆的时候还会获得一张VIP卡，但是这个VIP卡是因人而异的，比如马云是VIP999，而小鹏我是VIP2(每个用户的权限不一样)。博物馆方面为了安全起见，为每个游客都配备了一个随身保镖，这个保镖呢会在你进入不同的展区(进入不同的路由)的时候呢，会让你先在展区门口站一会儿，取出你的VIP卡并和这个展区的等级进行匹对(保镖$rootScope的路由监听，而这个等级匹对的工作便是所构建的服务)，只有你的VIP等级大于或者等于展区权限等级，您才能进去展区参观(根据用户权限判断是否能进去该路由)。
下面是具体的实现方式
1、 angular常量constant
app.constant('ACCESS_LEVELS', {
pub: 1,
user: 2
});
2、 $routerProvider配置为每个路由配置权限(注入常量)
app.config(function($routerProvider, ACCESS_LEVELS){
$routerProvider
.when('/', {
templateUrl: 'tem/main.html',
access_level: ACCESS_LEVELS.pub
})
.when('/account', {
templateUrl: 'tem/account.html',
access_level: ACCESS_LEVELS.user
})
.otherwise({redirectTo: '/'})
})
3、 创建一个能操作cookie并判断是否有权限的服务(注入常量)
app.factory('Auth', function($cookieStore, ACCESS_LEVELS){
var _user = $cookieStore.get('user');
var setUser = function(user){
if(!user.role || user.role < 0){
user.role = ACCESS.LEVELS.pub'
}
_user = user;
$cookieStroe.put('user', _user)
};
return {
isAuthorized: function(lvl){
return _user.role >= lvl
},
setUser: setUser,
isLoggedIn: function(){
return _user ? true : false
},
getUser: function(){
return _user
},
getId: function(){
return _user ? _user.id : null;
},
logout: function(){
$cookieStore.remove('user');
_user = null;
}
}
})
4、 $rootScope对路由的监听
app.run(function($rootScope, $location, Auth){
$rootScope.$on('$routeChangeStart', function(evt,next,curr){
if(!Auth.isAuthorized(next.$$route.access_level){
//没有访问权限
if(Auth.isLoggedIn()){
//如果登陆了
$location.path('/')
}else{
$location.path('/login');
}
})
})
})
三、 发送经身份验证的请求
当我们通过了身份验证，并取回了用户授权令牌之后，就可以在向服务器发送的请求中加入令牌
1、 在请求中加入令牌
$http({
method: 'GET',
url: 'http://myserver.com/api',
params: {
token: Auth.getToken();
}
}).success(function(data){
//....
}).catch(function(reason){
$q.reject(reason)
})
2、 通过拦截器，未每个请求都加入令牌信息
function($q, $rootScope, Auth){
return {
'request': function(req){
req.params = req.params || {};
if(Session.isAuthenticated() && !req.params.token){
req.params.token = Auth.getToken();
}
return req;
}
}
}
四、 限制元素显示
<div ng-if="currentUser">Welcome, {{ currentUser.name }</div>
<div ng-if="isAuthorized(userRoles.admin)">You're admin.</div>
<div ng-switch on="currentUser.role">
<div ng-switch-when="userRoles.admin">You're admin.</div>
<div ng-switch-when="userRoles.editor">You're editor.</div>
<div ng-switch-default>You're something else.</div>
</div>
五、 弹出登录对话框
.directive('loginDialog', function (AUTH_EVENTS) {
return {
restrict: 'A',
template: '<div ng-if="visible"
ng-include="\'login-form.html\'">',
link: function (scope) {
var showDialog = function () {
scope.visible = true;
};
scope.visible = false;
scope.$on(AUTH_EVENTS.notAuthenticated, showDialog);
scope.$on(AUTH_EVENTS.sessionTimeout, showDialog)
}
};
})
资料参考：
1. 《AngularJS权威指南》P159
2. AngularJS 应用身份认证的技巧 https://blog.coding.net/blog/techniques-for-authentication-in-angular-js-applications?type=hot
