AngularJS身份验证的方法_AngularJS

权限的设计中比较常见的就是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身份验证的方法,希望对大家有所帮助。

以上是小编为您精心准备的的内容,在的博客、问答、公众号、人物、课程等栏目也有的相关内容,欢迎继续使用右上角搜索按钮进行搜索angularjs身份验证
angularjs身份验证、选择网络身份验证方法、身份证验证方法、angularjs 身份证校验、angularjs 身份认证,以便于您获取更多的相关知识。

时间: 2024-08-01 07:02:59

AngularJS身份验证的方法_AngularJS的相关文章

XP系统使用注册表添加网络身份验证的方法

  在今天的注册表使用教程,我们将给大家分享的是XP系统使用注册表添加网络身份验证的方法.那么,为什么要添加添加网络身份验证呢?打个比方,我们在使用远程桌面连接的时候,如果添加了网络身份验证,将大大提高我们的电脑安全性.那么,XP系统网络身份验证怎么添加呢?一起来了解一下吧! 运行 XP系统网络身份验证添加步骤如下: 第1步:进入Windows XP SP3,运行"regedit"打开注册表编辑器,依次进入"HKEY_LOCAL_MACHINESYSTEMCurrentCon

PHP中配置IIS7实现基本身份验证的方法_php技巧

在PHP运行环境中配置IIS7实现基本身份验证的方法,其实IIS7身份验证的方法有好几种,比如Windows身份验证.摘要式身份验证等,相对来说IIS7基本身份验证是最简单的一种,下面以图文方式介绍下IIS7基本身份验证的实现方法及注意事项,希望对PHP入门学习的朋友有所帮助. 准备工作 1.由于默认IIS7并没有安装配置身份验证功能,所以如果想要实现IIS7基本身份验证,首先必须安装IIS7身份验证功能,你需要打开 控制面板>程序和功能>打开或关闭Windows功能,找到IIS,选择基本身份

浅谈PHP+MYSQL身份验证的方法

mysql 近日在为学校制做校友录时,需要身份验证,在对比之后决定采用PHP+MYSQL进行身份验证. 之前也曾考虑过用cookies或session.但是用cookies,在用户离线再上线后,只要cookies不过期,不用登录仍然可以保持在线,这对于网吧来说是个隐患.而且用户可以关闭cookies,这样身份验证就不成功.也考虑过用session,session在浏览过程中不断的将访问信息加入到session中,如果用户在网站内时间很长,浏览的页面很多,就用导致session越来越大,浏览速度降

Ghost Win7系统中通过注册表添加网络身份验证的方法

  1.点击"开始--运行",在运行对话框中输入"regedit"命令按回车,打开注册表编辑器; 2.在打开的注册表编辑器中依次展开定位到:"HKEY_LOCAL_MACHINESYSTEMCurrentControlSetControlLsa"项,然后在窗口右侧中双击打开"Security Packages"; 3.弹出来的"编辑多字符串"对话框中,在列表中添加"tspkg"的内容;

编写php应用程序实现摘要式身份验证的方法详解_php技巧

通基本身份认证一样,也可以使用PHP网页处理HTTP请求报头字段来匹配摘要式身份验证信息.例如下边的代码使用header()函数要求客户端使用Digest验证,它在HTTP消息报头中增加了一个WWW-Authenticate字段:header('WWW-Authenticate:Digest Realm="MyRealm",nonce="47alf7cf25ce7",algorithm=MD5,qop="auth"');-------------

Nodejs中session的简单使用及通过session实现身份验证的方法_node.js

session 不用多介绍,使一个http可以对应一个终端用户. session的本质使用cookie来实现. 原理大概是:http 带来服务端提前设置 cookie,服务端拿到标示用户身份的cookie, 再去固定地点(数据库,文件)检索出对应的用户身份.把身份赋值给本次请求的request,在程序处理中就知晓了用户的身份了.(在PHP,ASP或者其他服务端语言中都自动帮你实现了) 实现cookie 需要为每一个用户设置一个可以标示用户身份的cookie.可以使用如下规则 注册邮箱MD5值+密

详解Angular开发中的登陆与身份验证_AngularJS

前言 由于 Angular 是单页应用,会在一开始,就把大部分的资源加载到浏览器中,所以就更需要注意验证的时机,并保证只有通过了验证的用户才能看到对应的界面. 本篇文章中的身份验证,指的是如何确定用户是否已经登陆,并确保在每次与服务器的通信中,都能够满足服务器的验证需求.注意,并不包括对具体是否具有某一个权限的判断. 对于登陆,主要是接受用户的用户名密码输入,提交到服务器进行验证,处理验证响应,在浏览器端构建身份验证数据. 实现身份验证的两种方式 目前,实现身份验证的方法,主要有两个大类: Co

[收藏]使用Reporting Services中的窗体身份验证

services 使用 Reporting Services 中的窗体身份验证发布日期: 8/18/2004 | 更新日期: 8/18/2004Microsoft Corporation 适用范围:Microsoft SQL Server 2000 Reporting Services 摘要:了解有关 Reporting Services 安全扩展方面的知识,着重学习窗体身份验证.此外,下载和部署 Reporting Services 的窗体身份验证扩展示例. 要安装示例代码,请下载 Forms

Angular应用中的登录与身份验证示例

Angular 经常会被用到后台和管理工具的开发,这两类都会需要对用户进行鉴权.而鉴权的第一步,就是进行身份验证.由于 Angular 是单页应用,会在一开始,就把大部分的资源加载到浏览器中,所以就更需要注意验证的时机,并保证只有通过了验证的用户才能看到对应的界面. 功能边界 本篇文章中的身份验证,指的是如何确定用户是否已经登录,并确保在每次与服务器的通信中,都能够满足服务器的验证需求.注意,并不包括对具体是否具有某一个权限的判断. 对于登录,主要是接受用户的用户名密码输入,提交到服务器进行验证