AngularJS中的身份验证

欢迎大家指导与讨论 : ）

　  一、  身份验证的意义

　 首先呢，网络应用的身份验证的意图在于：保护网站中的重要资源。基于某些原因这些资源并不能公开，比如付费资源(交过钱的用户才能上的网络课程)，或者一些管理功能。其次，在AngularJS中推荐使用server来实现验证功能，因为服务是单例，并且全局可注入使用。

　  二. 1、 客户端身份验证——保护API访问资源

如果想要对一个会发送受保护的API请求(例如一个服务器可能返回401状态的API请求)的路由进行保护，但又希望可以正常地加载页面，可以简单地通过拦截器来实现

app.config(function($httpProvider){
     var interceptor = function($q, $rootScope, Auth){
         return {
             'response': function(resp){
                   if(resp.config.url == 'api/login'){
                        Anth.setToken(resp.data.token);
                   }
                   return resp
              }
              'responseError': function(rejection){
                    switch(rejection){
                         case: 401: //...; break;
                         case: 402: //...; break;
                    }
               }
         }
     }
})                    

　　二. 2、 客户端身份验证——使用路由定义受保护资源

首先我们需要四样工具。1、 angular常量constant. 2、 $routerProvider配置为每个路由配置权限. 3、 创建一个能操作cookie并判断是否有权限的服务. 4、 $rootScope对路由的监听

　　举个简单的例子~ 一天风和日丽， 您要去参观一个藏有各种各样并且价值连城的收藏品的博物馆(用户要进入带有各种各样资源的站点)。博物馆里面呢，有许多不同的展区(站点里不同的路由视图)，每个展区都有相应的等级，比如说宝石展区等级是VIP9以上的游客才能进去，而猎物展区等级是VIP2以上的游客就能进去参观了(每个路由配置相应的权限)。而每个游客，在进入博物馆的时候还会获得一张VIP卡，但是这个VIP卡是因人而异的，比如马云是VIP999，而小鹏我是VIP2(每个用户的权限不一样)。博物馆方面为了安全起见，为每个游客都配备了一个随身保镖，这个保镖呢会在你进入不同的展区(进入不同的路由)的时候呢，会让你先在展区门口站一会儿，取出你的VIP卡并和这个展区的等级进行匹对(保镖$rootScope的路由监听，而这个等级匹对的工作便是所构建的服务)，只有你的VIP等级大于或者等于展区权限等级，您才能进去展区参观(根据用户权限判断是否能进去该路由)。

　　下面是具体的实现方式

　　1、 angular常量constant

app.constant('ACCESS_LEVELS', {
   pub: 1,
   user: 2
});

　　2、 $routerProvider配置为每个路由配置权限(注入常量)

app.config(function($routerProvider, ACCESS_LEVELS){
   $routerProvider
      .when('/', {
          templateUrl: 'tem/main.html',
          access_level: ACCESS_LEVELS.pub
     })
      .when('/account', {
          templateUrl: 'tem/account.html',
          access_level: ACCESS_LEVELS.user
     })
      .otherwise({redirectTo: '/'})
})

　　3、 创建一个能操作cookie并判断是否有权限的服务(注入常量)

app.factory('Auth', function($cookieStore, ACCESS_LEVELS){
    var _user = $cookieStore.get('user');
    var setUser = function(user){
         if(!user.role || user.role < 0){
               user.role = ACCESS.LEVELS.pub'
         }
         _user = user;
         $cookieStroe.put('user', _user)
    };
    return {
         isAuthorized: function(lvl){
              return _user.role >= lvl
         },
         setUser: setUser,
         isLoggedIn: function(){
              return _user ? true : false
         },
         getUser: function(){
              return _user
         },
         getId: function(){
              return _user ? _user.id : null;
         },
         logout: function(){
             $cookieStore.remove('user');
             _user = null;
         }
    }
})

　　4、 $rootScope对路由的监听

app.run(function($rootScope, $location, Auth){
    $rootScope.$on('$routeChangeStart', function(evt,next,curr){
          if(!Auth.isAuthorized(next.$$route.access_level){
                //没有访问权限
                if(Auth.isLoggedIn()){
                      //如果登陆了
                      $location.path('/')
                }else{
                       $location.path('/login');
                }
          })
    })
})            

　  　三、 发送经身份验证的请求

当我们通过了身份验证，并取回了用户授权令牌之后，就可以在向服务器发送的请求中加入令牌

 1、 在请求中加入令牌

$http({
     method: 'GET',
     url: 'http://myserver.com/api',
     params: {
          token: Auth.getToken();
     }
}).success(function(data){
    //....
}).catch(function(reason){
    $q.reject(reason)
})
     

　　2、 通过拦截器，未每个请求都加入令牌信息

function($q, $rootScope, Auth){
      return {
            'request': function(req){
                   req.params = req.params || {};
                   if(Session.isAuthenticated() && !req.params.token){
                        req.params.token = Auth.getToken();
                   }
                   return req;
             }
      }
}

　　 四、 限制元素显示

<div ng-if="currentUser">Welcome, {{ currentUser.name }</div>
<div ng-if="isAuthorized(userRoles.admin)">You're admin.</div>
<div ng-switch on="currentUser.role">
   <div ng-switch-when="userRoles.admin">You're admin.</div>
   <div ng-switch-when="userRoles.editor">You're editor.</div>
   <div ng-switch-default>You're something else.</div>
</div>

　　五、 弹出登录对话框

.directive('loginDialog', function (AUTH_EVENTS) {
  return {
    restrict: 'A',
    template: '<div ng-if="visible"
                    ng-include="\'login-form.html\'">',
    link: function (scope) {
      var showDialog = function () {
        scope.visible = true;
      };

      scope.visible = false;
      scope.$on(AUTH_EVENTS.notAuthenticated, showDialog);
      scope.$on(AUTH_EVENTS.sessionTimeout, showDialog)
    }
  };
})

　　资料参考：

　　1. 《AngularJS权威指南》P159

　　2.  AngularJS 应用身份认证的技巧 https://blog.coding.net/blog/techniques-for-authentication-in-angular-js-applications?type=hot