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 相关文章推荐
制作特殊字的脚本
Jun 26 Javascript
javascript的对话框详解与参数
Mar 08 Javascript
jquery制作居中遮罩层效果分享
Feb 21 Javascript
深入学习JavaScript中的Rest参数和参数默认值
Jul 28 Javascript
jquery ztree实现树的搜索功能
Feb 25 Javascript
D3.js进阶系列之CSV表格文件的读取详解
Jun 06 Javascript
基于ajax和jsonp的原生封装(实例)
Oct 16 Javascript
Javascript Promise用法详解
May 10 Javascript
webpack4简单入门实例
Sep 06 Javascript
基于Vue2实现简易的省市区县三级联动组件效果
Nov 05 Javascript
20多个小事例带你重温ES10新特性(小结)
Sep 29 Javascript
微信小程序连接服务器展示MQTT数据信息的实现
Jul 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原理的opcodes(操作码)
2010/10/26 PHP
php数组相加 array(“a”)+array(“b”)结果还是array(“a”)
2012/09/19 PHP
php采集文章中的图片获取替换到本地(实现代码)
2013/07/08 PHP
PHP获取mysql数据表的字段名称和详细信息的方法
2014/09/27 PHP
PDO预处理语句PDOStatement对象使用总结
2014/11/20 PHP
PHP中使用imagick生成PSD文件缩略图教程
2015/01/26 PHP
WordPress的主题编写中获取头部模板和底部模板
2015/12/28 PHP
JavaScript 保存数组到Cookie的代码
2010/04/14 Javascript
TreeView 用法(有代码)(asp.net)
2011/07/15 Javascript
那些年,我还在学习jquery 学习笔记
2012/03/05 Javascript
可在线编辑网页文字效果代码(单击)
2013/03/02 Javascript
14个有用的Jquery技巧分享
2015/01/08 Javascript
编写自己的jQuery提示框(Tip)插件
2015/02/05 Javascript
HTML中setCapture、releaseCapture 使用方法浅析
2016/09/25 Javascript
基于slideout.js实现移动端侧边栏滑动特效
2016/11/28 Javascript
angularJS的radio实现单项二选一的使用方法
2018/02/28 Javascript
vue中使用protobuf的过程记录
2018/10/26 Javascript
JS无限级导航菜单实现方法
2019/01/05 Javascript
js代码编写无缝轮播图
2020/09/13 Javascript
[07:12]2014DOTA2西雅图国际邀请赛 黑马Liquid专题采访
2014/07/12 DOTA
Python中的zipfile模块使用详解
2015/06/25 Python
python开发之IDEL(Python GUI)的使用方法图文详解
2015/11/12 Python
Python实现读取txt文件并画三维图简单代码示例
2017/12/09 Python
浅谈Python实现Apriori算法介绍
2017/12/20 Python
详解10个可以快速用Python进行数据分析的小技巧
2019/06/24 Python
python应用文件读取与登录注册功能
2019/09/23 Python
TensorFlow-gpu和opencv安装详细教程
2020/06/30 Python
用React加CSS3实现微信拆红包动画效果
2017/03/13 HTML / CSS
Html5 实现微信分享及自定义内容的流程
2019/08/20 HTML / CSS
Timberland澳大利亚官网:全球领先的户外品牌
2019/12/10 全球购物
Linux中如何用命令创建目录
2015/01/12 面试题
遥感技术与仪器求职信
2014/02/22 职场文书
孝敬父母的演讲稿
2014/05/14 职场文书
党性观念心得体会
2014/09/03 职场文书
压缩Redis里的字符串大对象操作
2021/06/23 Redis
MySQL中IO问题的深入分析与优化
2022/04/02 MySQL