AngularJS如何做身份验证

如果要在客户端使用AngularJS做身份验证的话,推荐使用service来做,因为service是单例的,可以很方便的在所有view,controller,directives,filters和其他service中共享数据,而不用采取暴露全局变量的方式,封装性也有一定的保障。

带你走近AngularJS系列

带你走近AngularJS - 基本功能介绍

带你走近AngularJS - 体验指令实例

带你走近AngularJS - 创建自定义指令

如何在 AngularJS 中对控制器进行单元测试

AngularJS 之 Factory vs Service vs Provider

一个简单的例子:

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 的下载地址请点这里

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:http://www.heiqu.com/76d7f6bfe03890ddced1c3ec81b838be.html