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中的Document文档对象
Jan 16 Javascript
各浏览器对click方法的支持差异小结
Jul 31 Javascript
jquery选择器需要注意的问题
Nov 26 Javascript
浅谈javascript中this在事件中的应用
Feb 15 Javascript
你不知道的高性能JAVASCRIPT
Jan 18 Javascript
Ubuntu系统下Angularjs开发环境安装
Sep 01 Javascript
JS树形菜单组件Bootstrap TreeView使用方法详解
Dec 21 Javascript
微信小程序 小程序制作及动画(animation样式)详解
Jan 06 Javascript
vue-router+vuex addRoutes实现路由动态加载及菜单动态加载
Sep 28 Javascript
Node.js中,在cmd界面,进入退出Node.js运行环境的方法
May 12 Javascript
Vue中用props给data赋初始值遇到的问题解决
Nov 27 Javascript
vue(2.x,3.0)配置跨域代理
Nov 27 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 数组的合并、拆分、区别取值函数集
2010/02/15 PHP
常用的PHP数据库操作方法(MYSQL版)
2011/06/08 PHP
php 面试碰到过的问题 在此做下记录
2011/06/09 PHP
for循环连续求和、九九乘法表代码
2012/02/20 PHP
基于PHP Web开发MVC框架的Smarty使用说明
2013/04/19 PHP
浅谈PHP中其他类型转化为Bool类型
2016/03/28 PHP
PHP使用mysqli操作MySQL数据库的简单方法
2017/02/04 PHP
php+Memcached实现简单留言板功能示例
2017/02/15 PHP
JavaScript基本对象
2007/01/11 Javascript
Prototype Number对象 学习
2009/07/19 Javascript
jquery animate图片模向滑动示例代码
2011/01/26 Javascript
jquery插件制作 手风琴Panel效果实现
2012/08/17 Javascript
仿百度的关键词匹配搜索示例
2013/09/25 Javascript
jQuery中ajax的使用与缓存问题的解决方法
2013/12/19 Javascript
基于jQuery实现带动画效果超炫酷的弹出对话框(附源码下载)
2016/02/22 Javascript
vue.js指令v-for使用及索引获取
2016/11/03 Javascript
JS声明对象时属性名加引号与不加引号的问题及解决方法
2018/02/16 Javascript
AngularJS 应用模块化的使用
2018/04/04 Javascript
Nodejs监听日志文件的变化的过程解析
2019/08/04 NodeJs
在layui中layer弹出层点击事件无效的解决方法
2019/09/05 Javascript
vue或react项目生产环境去掉console.log的操作
2020/09/02 Javascript
rhythmbox中文名乱码问题解决方法
2008/09/06 Python
python 捕获 shell/bash 脚本的输出结果实例
2017/01/04 Python
Python遍历文件夹和读写文件的实现方法
2017/05/10 Python
python出现"IndentationError: unexpected indent"错误解决办法
2017/10/15 Python
Python键盘输入转换为列表的实例
2018/06/23 Python
Python 解决OPEN读文件报错 ,路径以及r的问题
2019/12/19 Python
python 如何区分return和yield
2020/09/22 Python
HTML5实现多张图片上传功能
2016/03/11 HTML / CSS
世界上获奖最多的手机镜头:Olloclip
2018/03/03 全球购物
喷漆工的岗位职责
2014/03/17 职场文书
实践单位评语
2014/04/26 职场文书
群众路线剖析材料
2014/09/30 职场文书
幼儿园教师节活动总结
2015/03/23 职场文书
公司员工违纪检讨书
2015/05/05 职场文书
Python使用mitmproxy工具监控手机 下载手机小视频
2022/04/18 Python