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将NodeList作为Array数组处理的方法
Jul 09 Javascript
JQuery中对服务器控件 DropdownList, RadioButtonList, CheckboxList的操作总结
Jun 28 Javascript
javascript面向对象包装类Class封装类库剖析
Jan 24 Javascript
jqgrid 表格数据导出实例
Nov 21 Javascript
关于js内存泄露的一个好例子
Dec 09 Javascript
textarea不能通过maxlength属性来限制字数的解决方法
Sep 01 Javascript
Jquery插件实现点击获取验证码后60秒内禁止重新获取
Mar 13 Javascript
深入浅析search 搜索框的写法
Aug 02 Javascript
利用jQuery异步上传文件的插件用法详解
Jul 19 jQuery
微信小程序如何获取用户手机号
Jan 26 Javascript
深入浅析angular和vue还有jquery的区别
Aug 13 jQuery
Vue extend的基本用法(实例详解)
Dec 09 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中读取和写入WORD文档的代码
2008/04/09 PHP
PHP error_log()将错误信息写入一个文件(定义和用法)
2013/10/25 PHP
Yii中使用PHPExcel导出Excel的方法
2014/12/26 PHP
CentOS下PHP7的编译安装及MySQL的支持和一些常见问题的解决办法
2015/12/17 PHP
Yii2.0 模态弹出框+ajax提交表单
2016/05/22 PHP
javascript之学会吝啬 精简代码
2010/04/25 Javascript
学习javascript面向对象 实例讲解面向对象选项卡
2016/01/04 Javascript
javascript的replace方法结合正则使用实例总结
2016/06/16 Javascript
JS键盘版计算器的制作方法
2016/12/03 Javascript
简单实现jQuery级联菜单
2017/01/09 Javascript
jQuery加载及解析XML文件的方法实例分析
2017/01/22 Javascript
jQuery简介_动力节点Java学院整理
2017/07/04 jQuery
jQuery实现可编辑表格并生成json结果(实例代码)
2017/07/19 jQuery
vue实现压缩图片预览并上传功能(promise封装)
2019/01/10 Javascript
微信小程序单选radio及多选checkbox按钮用法示例
2019/04/30 Javascript
JS co 函数库的含义和用法实例总结
2020/04/08 Javascript
详解JavaScript的this指向和绑定
2020/09/08 Javascript
[04:53]DOTA2英雄基础教程 祈求者
2014/01/03 DOTA
Python实现简单的代理服务器
2015/07/25 Python
python自动翻译实现方法
2016/05/28 Python
Python 正则表达式入门(初级篇)
2016/12/07 Python
分享几道你可能遇到的python面试题
2017/07/24 Python
Python实现点阵字体读取与转换的方法
2019/01/29 Python
Python告诉你木马程序的键盘记录原理
2019/02/02 Python
python matplotlib模块基本图形绘制方法小结【直线,曲线,直方图,饼图等】
2020/04/26 Python
Django微信小程序后台开发教程的实现
2020/06/03 Python
python小白学习包管理器pip安装
2020/06/09 Python
关于css中margin的值和垂直外边距重叠问题
2020/10/27 HTML / CSS
美国美发品牌:Bumble and Bumble
2016/10/08 全球购物
物流专业大学生的自我鉴定
2013/11/13 职场文书
模范教师事迹材料
2014/02/10 职场文书
服务承诺口号
2014/05/22 职场文书
公司年底活动方案
2014/08/17 职场文书
授权委托书协议书
2014/10/16 职场文书
2014最新股权信托合同协议书
2014/11/18 职场文书
使用numpy nonzero 找出非0元素
2021/05/14 Python