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 相关文章推荐
jQuery 1.0.2
Oct 11 Javascript
javascript的字符串按引用复制和传递,按值来比较介绍与应用
Dec 28 Javascript
小结Node.js中非阻塞IO和事件循环
Sep 18 Javascript
JavaScript indexOf方法入门实例(计算指定字符在字符串中首次出现的位置)
Oct 17 Javascript
jQuery链式操作实例分析
Nov 16 Javascript
JS操作XML实例总结(加载与解析XML文件、字符串)
Dec 08 Javascript
基于javascript实现checkbox复选框实例代码
Jan 28 Javascript
再次谈论React.js实现原生js拖拽效果引起的一系列问题
Apr 03 Javascript
js小数计算小数点后显示多位小数的实现方法
May 30 Javascript
javascript解析ajax返回的xml和json格式数据实例详解
Jan 05 Javascript
CheckBox多选取值及判断CheckBox选中是否为空的实例
Oct 31 Javascript
Vue.js实现tab切换效果
Jul 24 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
《星际争霸II》全新指挥官斯台特曼现已上线
2020/03/08 星际争霸
php版小黄鸡simsimi聊天机器人接口分享
2014/01/26 PHP
PHP SPL标准库之数据结构堆(SplHeap)简单使用实例
2015/05/12 PHP
thinkPHP5.1框架使用SemanticUI实现分页功能示例
2019/08/03 PHP
jQuery链式操作如何实现以及为什么要用链式操作
2013/01/17 Javascript
javascript将数字转换整数金额大写的方法
2015/01/27 Javascript
详解JavaScript中数组的相关知识
2015/07/29 Javascript
JS实现带有抽屉效果的产品类网站多级导航菜单代码
2015/09/15 Javascript
js 去掉字符串前后空格实现代码集合
2017/03/25 Javascript
Swiper自定义分页器使用详解
2017/12/28 Javascript
JS监听滚动和id自动定位滚动
2018/12/18 Javascript
实例介绍JavaScript中多种组合继承
2019/01/20 Javascript
TypeScript开发Node.js程序的方法
2019/04/30 Javascript
在Vue中使用Select选择器拼接label的操作
2020/10/22 Javascript
Python  pip安装lxml出错的问题解决办法
2017/02/10 Python
Python入门之后再看点什么好?
2018/03/05 Python
对python numpy数组中冒号的使用方法详解
2018/04/17 Python
Go/Python/Erlang编程语言对比分析及示例代码
2018/04/23 Python
python判断计算机是否有网络连接的实例
2018/12/15 Python
详解Python Matplotlib解决绘图X轴值不按数组排序问题
2019/08/05 Python
Django model重写save方法及update踩坑详解
2020/07/27 Python
python实现磁盘日志清理的示例
2020/11/05 Python
为2021年的第一场雪锦上添花:用matplotlib绘制雪花和雪景
2021/01/05 Python
CSS3 实现倒计时效果
2020/11/25 HTML / CSS
用HTML5的canvas实现一个炫酷时钟效果
2016/05/20 HTML / CSS
英国Amara家居法国网站:家居装饰,现代装饰和豪华礼品
2016/12/15 全球购物
英国在线药房:Express Chemist
2019/03/28 全球购物
物控部经理职务说明书
2014/02/25 职场文书
超市创意活动方案
2014/08/15 职场文书
店铺转让协议书(2014版)
2014/09/23 职场文书
2014党的群众路线教育实践活动学习心得体会
2014/10/31 职场文书
岳庙导游词
2015/02/04 职场文书
事业单位岗位说明书
2015/10/08 职场文书
导游词之寿县报恩寺
2020/01/19 职场文书
Django给表单添加honeypot验证增加安全性
2021/05/06 Python
用Python实现屏幕截图详解
2022/01/22 Python