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

巴特西

AngularJS中的身份验证

最新文章

热门文章