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 相关文章推荐
Iframe 自适应高度并实时监控高度变化的js代码
Oct 30 Javascript
jquery 页面全选框实践代码
Apr 02 Javascript
jquery写个checkbox——类似邮箱全选功能
Mar 19 Javascript
JQUERY实现左侧TIPS滑进滑出效果示例
Jun 27 Javascript
js获取判断上传文件后缀名的示例代码
Feb 19 Javascript
javascript将浮点数转换成整数的三个方法
Jun 23 Javascript
Javascript模块化编程详解
Dec 01 Javascript
简要了解jQuery移动web开发的响应式布局设计
Dec 04 Javascript
JavaScript数组方法大全(推荐)
Jul 05 Javascript
echarts学习笔记之图表自适应问题详解
Nov 22 Javascript
vue使用screenfull插件实现全屏功能
Sep 17 Javascript
Vue SPA 首屏优化方案
Feb 26 Vue.js
基于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如何实现Socket服务器
2015/09/23 PHP
PHP实现QQ空间自动回复说说的方法
2015/12/02 PHP
鼠标右击事件代码(asp.net后台)
2011/01/27 Javascript
让table变成exls的示例代码
2014/03/24 Javascript
js 与 php 通过json数据进行通讯示例
2014/03/26 Javascript
setInterval计时器不准的问题解决方法
2014/05/08 Javascript
JS中的form.submit()不能提交表单的错误原因
2014/10/08 Javascript
javascript 获取浏览器版本
2015/01/21 Javascript
JavaScript实现仿网易通行证表单验证
2015/05/25 Javascript
uploadify多文件上传参数设置技巧
2015/11/16 Javascript
Vue.js报错Failed to resolve filter问题的解决方法
2016/05/25 Javascript
浅谈JavaScript中的apply/call/bind和this的使用
2017/02/26 Javascript
微信小程序 仿猫眼实现实例代码
2017/03/14 Javascript
微信小程序url传参写变量的方法
2018/08/09 Javascript
微信小程序开发之tabbar图标和颜色的实现
2018/10/17 Javascript
elementUI select组件默认选中效果实现的方法
2019/03/25 Javascript
从0到1搭建Element的后台框架的方法步骤
2019/04/10 Javascript
解决vue单页面应用中动态修改title问题
2019/06/09 Javascript
Vue中component标签解决项目组件化操作
2020/09/04 Javascript
Python格式化css文件的方法
2015/03/10 Python
在Docker上开始部署Python应用的教程
2015/04/17 Python
django 按时间范围查询数据库实例代码
2018/02/11 Python
pandas 两列时间相减换算为秒的方法
2018/04/20 Python
Python运行不显示DOS窗口的解决方法
2018/10/22 Python
Python实现字典按key或者value进行排序操作示例【sorted】
2019/05/03 Python
python画图的函数用法以及技巧
2019/06/28 Python
python实现倒计时小工具
2019/07/29 Python
python 三元运算符使用解析
2019/09/16 Python
CSS Grid布局教程之网格单元格布局
2014/12/30 HTML / CSS
Html5 new XMLHttpRequest()监听附件上传进度
2021/01/14 HTML / CSS
继承时候类的执行顺序问题,一般都是选择题,问你将会打印出什么?
2015/11/18 面试题
高中生期末评语大全
2014/01/28 职场文书
高二政治教学反思
2014/02/01 职场文书
人事专员岗位职责范本
2014/03/04 职场文书
java中重写父类方法加不加@Override详解
2021/06/21 Java/Android
Netflix《海贼王》真人版剧集多张片场照曝光
2022/04/04 日漫