AngularJS身份验证的方法


Posted in Javascript onFebruary 17, 2016

权限的设计中比较常见的就是RBAC基于角色的访问控制,基本思想是,对系统操作的各种权限不是直接授予具体的用户,而是在用户集合与权限集合之间建立一个角色集合。每一种角色对应一组相应的权限。

一旦用户被分配了适当的角色后,该用户就拥有此角色的所有操作权限。这样做的好处是,不必在每次创建用户时都进行分配权限的操作,只要分配用户相应的角色即可,而且角色的权限变更比用户的权限变更要少得多,这样将简化用户的权限管理,减少系统的开销。

在Angular构建的单页面应用中,要实现这样的架构我们需要额外多做一些事.从整体项目上来讲,大约有3处地方,前端工程师需要进行处理.

1. UI处理(根据用户拥有的权限,判断页面上的一些内容是否显示)

2. 路由处理(当用户访问一个它没有权限访问的url时,跳转到一个错误提示的页面)

3. HTTP请求处理(当我们发送一个数据请求,如果返回的status是401或者403,则通常重定向到一个错误提示的页面)

如果要在客户端使用AngularJS做身份验证的话,推荐使用service来做,因为service是单例的,可以很方便的在所有view,controller,directives,filters和其他service中共享数据,而不用采取暴露全局变量的方式,封装性也有一定的保障。

一个简单的例子:

services.factory('UserService', [function() { 
var sdo = { 
isLogged: false, 
username: '' 
}; 
return sdo; 
}]);

AngularJS中使用service都是通过依赖声明的方式来做的,比如:

var controllers = angular.module('myApp.controllers', []);
/* ... */
controllers.controller('loginController', ['$scope', '$http', 'UserService', function(scope, $http, User) {
}]);

在这个loginController里我们可以定义一个login function来向服务器验证用户身份:

scope.login = function() { 
var config = { /* ... */ } // configuration object
$http(config) 
.success(function(data, status, headers, config) { 
if (data.status) { 
// succefull login 
User.isLogged = true; 
User.username = data.username; 
} 
else { 
User.isLogged = false; 
User.username = ''; 
} 
}) 
.error(function(data, status, headers, config) { 
User.isLogged = false; 
User.username = ''; 
}); 
}

接着,只要声明依赖了UserService的任何controller,view,filter等都可以通过UserService.isLogged来判断用户是否是已经验证过的,或者匿名用户

由于AngularJS通常会使用template把页面拆分重组,此时使用routeProvider来控制各个页面的访问规则:

app.config(['$routeProvider', function($routeProvider) { 
$routeProvider.when('/login', { templateUrl: 'partials/login.html', controller: 'loginCtrl' , access: {isFree: true}}); 
$routeProvider.when('/main', { templateUrl: 'partials/main.html', controller: 'mainCtrl' }); 
$routeProvider.otherwise({ redirectTo: '/main' }); 
}]);

有的页面是无需身份验证就可以访问的,例如login.html,有的页面是需要登录用户才能够看到的,例如main.html,此时我们就需要通过增加通用的checkUser逻辑来判断当前用户是否能看到这些页面:

directives.directive('checkUser', ['$rootScope', '$location', 'userSrv', function ($root, $location, userSrv) { 
return { 
link: function (scope, elem, attrs, ctrl) { 
$root.$on('$routeChangeStart', function(event, currRoute, prevRoute){ 
if (!prevRoute.access.isFree && !userSrv.isLogged) { 
// reload the login route 
} 
/* 
* IMPORTANT: 
* It's not difficult to fool the previous control, 
* so it's really IMPORTANT to repeat the control also in the backend, 
* before sending back from the server reserved information. 
*/ 
}); 
} 
} 
}]);

这个directive注册在了rootScope上,并且监听了routeChangeStart,也是一种AOP的概念,在route change发生之前,织入了一个切面,来判断用户身份权限。由此,来达到在AngularJS中验证身份的整个逻辑。

以上所述是小编给大家介绍的AngularJS身份验证的方法,希望对大家有所帮助。

Javascript 相关文章推荐
JavaScript 函数式编程的原理
Oct 16 Javascript
jquery 选择器部分整理
Oct 28 Javascript
JS实现self的resend
Jul 22 Javascript
HTML5附件拖拽上传drop & google.gears实现代码
Apr 28 Javascript
jquery 图片上传按比例预览插件集合
May 28 Javascript
JS实现可自定义大小,可双击关闭的弹出层效果
Oct 16 Javascript
基于jquery插件编写countdown计时器
Jun 12 Javascript
js实现百度地图定位于地址逆解析,显示自己当前的地理位置
Dec 08 Javascript
AngularJs 利用百度地图API 定位当前位置 获取地址信息
Jan 18 Javascript
ES6扩展运算符的用途实例详解
Aug 20 Javascript
从Vuex中取出数组赋值给新的数组,新数组push时报错的解决方法
Sep 18 Javascript
JS实现根据数组对象的某一属性排序操作示例
Jan 14 Javascript
基于AngularJS+HTML+Groovy实现登录功能
Feb 17 #Javascript
实例讲解jquery中mouseleave和mouseout的区别
Feb 17 #Javascript
Javascript实现图片轮播效果(二)图片序列节点的控制实现
Feb 17 #Javascript
Bootstrap中CSS的使用方法
Feb 17 #Javascript
Javascript实现图片轮播效果(一)让图片跳动起来
Feb 17 #Javascript
基于javascript简单实现对身份证校验
Jan 25 #Javascript
使用jQuery判断Div是否在可视区域的方法 判断div是否可见
Feb 17 #Javascript
You might like
php set_magic_quotes_runtime() 函数过时解决方法
2010/07/08 PHP
IP攻击升级,程序改进以对付新的攻击
2010/11/23 PHP
Yii2框架操作数据库的方法分析【以mysql为例】
2019/05/27 PHP
PHP中__set()实例用法和基础讲解
2019/07/23 PHP
Javascript 构造函数 实例分析
2008/11/26 Javascript
js removeChild 障眼法 可能出现的错误
2009/10/06 Javascript
JavaScript(js)设置默认输入焦点(focus)
2012/12/28 Javascript
Jquery仿淘宝京东多条件筛选可自行结合ajax加载示例
2013/08/28 Javascript
node.js中的fs.exists方法使用说明
2014/12/17 Javascript
jQuery中on()方法用法实例
2015/01/19 Javascript
Js的Array数组对象详解
2016/02/22 Javascript
JS定时器用法分析【时钟与菜单中的应用】
2016/12/21 Javascript
jQuery插件zTree实现的多选树效果示例
2017/03/08 Javascript
详解RequireJS按需加载样式文件
2017/04/12 Javascript
AngularJS实现根据不同条件显示不同控件
2017/04/20 Javascript
详解webpack性能优化——DLL
2017/10/20 Javascript
100行代码实现一个vue分页组功能
2018/11/06 Javascript
node微信开发之获取access_token+自定义菜单
2019/03/17 Javascript
ligerUI的ligerDialog关闭刷新的方法
2019/09/27 Javascript
小程序实现日历左右滑动效果
2019/10/21 Javascript
[02:42]岂曰无衣,与子同袍!DOTA2致敬每一位守护人
2020/02/17 DOTA
利用Python如何生成hash值示例详解
2017/12/20 Python
python3+PyQt5自定义视图详解
2018/04/24 Python
详解如何在cmd命令窗口中搭建简单的python开发环境
2019/08/29 Python
关于Python 常用获取元素 Driver 总结
2019/11/24 Python
基于TensorFlow的CNN实现Mnist手写数字识别
2020/06/17 Python
animation和transition的区别
2020/10/12 HTML / CSS
深入解析HTML5的IndexedDB索引数据库
2015/09/14 HTML / CSS
美国蔬菜和植物种子公司:Burpee
2017/02/01 全球购物
非凡女性奢华谦虚风格:The Modist
2017/10/28 全球购物
生物有机护肤品:Aurelia Probiotic Skincare
2018/01/31 全球购物
团队会宣传标语
2014/10/09 职场文书
电影复兴之路观后感
2015/06/02 职场文书
优秀党员主要事迹材料
2015/11/04 职场文书
python脚本框架webpy模板控制结构
2021/11/20 Python
在MySQL中你成功的避开了所有索引
2022/04/20 MySQL