AngularJS中的身份验证
2016-02-25 00:03
661 查看
欢迎大家指导与讨论 : )
一、 身份验证的意义
首先呢,网络应用的身份验证的意图在于:保护网站中的重要资源。基于某些原因这些资源并不能公开,比如付费资源(交过钱的用户才能上的网络课程),或者一些管理功能。其次,在AngularJS中推荐使用server来实现验证功能,因为服务是单例,并且全局可注入使用。
二. 1、 客户端身份验证——保护API访问资源
如果想要对一个会发送受保护的API请求(例如一个服务器可能返回401状态的API请求)的路由进行保护,但又希望可以正常地加载页面,可以简单地通过拦截器来实现
二. 2、 客户端身份验证——使用路由定义受保护资源
首先我们需要四样工具。1、 angular常量constant. 2、 $routerProvider配置为每个路由配置权限. 3、 创建一个能操作cookie并判断是否有权限的服务. 4、 $rootScope对路由的监听
举个简单的例子~ 一天风和日丽, 您要去参观一个藏有各种各样并且价值连城的收藏品的博物馆(用户要进入带有各种各样资源的站点)。博物馆里面呢,有许多不同的展区(站点里不同的路由视图),每个展区都有相应的等级,比如说宝石展区等级是VIP9以上的游客才能进去,而猎物展区等级是VIP2以上的游客就能进去参观了(每个路由配置相应的权限)。而每个游客,在进入博物馆的时候还会获得一张VIP卡,但是这个VIP卡是因人而异的,比如马云是VIP999,而小鹏我是VIP2(每个用户的权限不一样)。博物馆方面为了安全起见,为每个游客都配备了一个随身保镖,这个保镖呢会在你进入不同的展区(进入不同的路由)的时候呢,会让你先在展区门口站一会儿,取出你的VIP卡并和这个展区的等级进行匹对(保镖$rootScope的路由监听,而这个等级匹对的工作便是所构建的服务),只有你的VIP等级大于或者等于展区权限等级,您才能进去展区参观(根据用户权限判断是否能进去该路由)。
下面是具体的实现方式
1、 angular常量constant
2、 $routerProvider配置为每个路由配置权限(注入常量)
3、 创建一个能操作cookie并判断是否有权限的服务(注入常量)
4、 $rootScope对路由的监听
三、 发送经身份验证的请求
当我们通过了身份验证,并取回了用户授权令牌之后,就可以在向服务器发送的请求中加入令牌
1、 在请求中加入令牌
2、 通过拦截器,未每个请求都加入令牌信息
四、 限制元素显示
五、 弹出登录对话框
资料参考:
1. 《AngularJS权威指南》P159
2. AngularJS 应用身份认证的技巧 https://blog.coding.net/blog/techniques-for-authentication-in-angular-js-applications?type=hot
一、 身份验证的意义
首先呢,网络应用的身份验证的意图在于:保护网站中的重要资源。基于某些原因这些资源并不能公开,比如付费资源(交过钱的用户才能上的网络课程),或者一些管理功能。其次,在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
相关文章推荐
- 【AngularJS学习笔记】00 序
- AngularJS动态加载模块和依赖
- 给 Web 开发者的 25 款最有用的 AngularJS 工具
- 深入理解Angular指令
- angularJs学习笔记-路由
- angularJs driective指令小实例
- AngularJS 第三天----作用域
- AngularJS中的JSONP实践
- 在AngularJS中学习javascript的new function意义及this作用域的生成过程
- angularjs 性能优化 转载
- angular好用的插件集合(持续更新中)
- AngularJS的启动过程分析
- AngularJS的启动引导过程
- AngularJs系列实战 Angularjs名词与概念(一)【转】
- [转]Ionic + AngularJS angular-translate 国际化本地化解决方案
- AngularJS-购物车Demo
- AngularJS如何下载Excel文件
- angularJS写的简易日历,有待简化
- ExtJS vs AngularJS
- AngularJs指令相关