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身份验证的方法，希望对大家有所帮助。