權(quán)限的設(shè)計(jì)中比較常見的就是RBAC基于角色的訪問控制,基本思想是，對(duì)系統(tǒng)操作的各種權(quán)限不是直接授予具體的用戶，而是在用戶集合與權(quán)限集合之間建立一個(gè)角色集合。每一種角色對(duì)應(yīng)一組相應(yīng)的權(quán)限。
一旦用戶被分配了適當(dāng)?shù)慕巧螅撚脩艟蛽碛写私巧乃胁僮鳈?quán)限。這樣做的好處是，不必在每次創(chuàng)建用戶時(shí)都進(jìn)行分配權(quán)限的操作，只要分配用戶相應(yīng)的角色即可，而且角色的權(quán)限變更比用戶的權(quán)限變更要少得多，這樣將簡化用戶的權(quán)限管理，減少系統(tǒng)的開銷。
在Angular構(gòu)建的單頁面應(yīng)用中,要實(shí)現(xiàn)這樣的架構(gòu)我們需要額外多做一些事.從整體項(xiàng)目上來講,大約有3處地方,前端工程師需要進(jìn)行處理.
1. UI處理(根據(jù)用戶擁有的權(quán)限,判斷頁面上的一些內(nèi)容是否顯示)
2. 路由處理(當(dāng)用戶訪問一個(gè)它沒有權(quán)限訪問的url時(shí),跳轉(zhuǎn)到一個(gè)錯(cuò)誤提示的頁面)
3. HTTP請(qǐng)求處理(當(dāng)我們發(fā)送一個(gè)數(shù)據(jù)請(qǐng)求,如果返回的status是401或者403,則通常重定向到一個(gè)錯(cuò)誤提示的頁面)
如果要在客戶端使用AngularJS做身份驗(yàn)證的話，推薦使用service來做，因?yàn)閟ervice是單例的，可以很方便的在所有view，controller，directives，filters和其他service中共享數(shù)據(jù)，而不用采取暴露全局變量的方式，封裝性也有一定的保障。
一個(gè)簡單的例子：
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) {}]);在這個(gè)loginController里我們可以定義一個(gè)login function來向服務(wù)器驗(yàn)證用戶身份：
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來判斷用戶是否是已經(jīng)驗(yàn)證過的，或者匿名用戶
由于AngularJS通常會(huì)使用template把頁面拆分重組，此時(shí)使用routeProvider來控制各個(gè)頁面的訪問規(guī)則：
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' }); }]);有的頁面是無需身份驗(yàn)證就可以訪問的，例如login.html，有的頁面是需要登錄用戶才能夠看到的，例如main.html，此時(shí)我們就需要通過增加通用的checkUser邏輯來判斷當(dāng)前用戶是否能看到這些頁面：
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. */ }); } } }]);這個(gè)directive注冊(cè)在了rootScope上，并且監(jiān)聽了routeChangeStart，也是一種AOP的概念，在route change發(fā)生之前，織入了一個(gè)切面，來判斷用戶身份權(quán)限。由此，來達(dá)到在AngularJS中驗(yàn)證身份的整個(gè)邏輯。
以上所述是小編給大家介紹的AngularJS身份驗(yàn)證的方法，希望對(duì)大家有所幫助。
新聞熱點(diǎn)
疑難解答
圖片精選
網(wǎng)友關(guān)注
