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身分識別驗證的方法，希望對大家有所協助。