在Angular中，如果权限值是异步请求所得，如何将其设置为HTTP请求头的Authorizatio

遇到此问题的背景 ：项目需要实现单点登录，在前后端分离的前提下，前台如何保存token值成为了一个问题。想到的解决方案是，将token值统一存到一个前端程序，其他的前端程序去这个前端程序去取token（其他更好的解决方案欢迎指导~~）。在项目用angular的情况下，选择了以下插件： angular-cross-storage ，此插件可以实现跨域存取localStorage，操作非常简单，都有demo。

通常情况下，设置HTTP的authorization只需在congfig中进行如下配置：

var app = angular.module("myApp",[]); 

app.config(function($httpProvider) { 
　　$httpProvider.defaults.headers.common["Authorization"] = 所需带的权限; 
});

但是在此处，权限值是存在另一个前端程序的token值，获取权限token值是异步请求，并不能确定在何时能完成，说不定还没得到token值，页面已经发出了http请求，而这个没设置Authorization的请求，势必会返回401。

So 先要设置一个拦截器，并在拦截器里设置请求头，代码如下：

     var  app = angular.module("myApp" ,[
         'angular-cross-storage' 
    ]);
　  //   拦截器服务 
   app.factory("HttpInterceptor",  function   ($q, tokenService) {
          var  HttpInterceptor =  {
            request:   function  (config){
                  var  deferred =  $q.defer();
                tokenService.getTokenEvents().then(  function (res) {   //   从另一个前端程序获取token 
                    config.headers["Authorization"] = "bearer " + res.value;  //   设置Authorization 
                     deferred.resolve(config);
                }).  catch ( function   (err) {
                      //   do something... 
                     deferred.resolve(config);
                });
                  return   deferred.promise;
 
            },
            requestError:   function  (err){
                  return   $q.reject(err);
            },
            response:   function  (res){
                console.log(res);
                  return   res;
            },
            responseError:   function  (err){
                  if (-1 ===  err.status) {
                    console.log( -1 );
                      //   远程服务器无响应 
                }  else   if (500 ===  err.status) {
                      //   处理各类自定义错误 
                }  else   if (401 ===  err.status) {
                     
                }
                  return   $q.reject(err);
            }
        };
          return   HttpInterceptor;
    } 

　 拦截器依赖一个对token操作的服务“tokenService"， 代码如下：

 //   token的存取及清除 
   app.factory("tokenService",  function  (CrossDomainStorage) {   //   CrossDomainStorage 是angular-cross-storage 的一个服务 
         var  setToken =  function   (access_token) {
              return  CrossDomainStorage.set("access_token" ,access_token)
        };
          var  setTokenType =  function   (token_type) {
              return  CrossDomainStorage.set("token_type" , token_type)
        };
          var  getToken =  function   () {
              return  CrossDomainStorage.get('access_token' )
        };
          var  clearToken =  function   () {
              return   CrossDomainStorage.clear()
        };
          return   {
            setTokenEvents:   function   (access_token) {
                  return   setToken(access_token)
            },
            setTokenTypeEvents:   function   (token_type) {
                  return   setTokenType(token_type)
            },
            getTokenEvents:   function   () {
                  return   getToken();
            },
            clearTokenEvents:   function   () {
                  return   clearToken();
            }
        }
    })
 

　 然后在config中配置拦截器， 代码如下：

app.config( function   ($httpProvider,CrossDomainStorageProvider) {
        $httpProvider.interceptors.push( 'HttpInterceptor' );
    }) 

　 就大功告成了，页面发起的请求都会带上 从另一前端程序取过来的 token值权限头。

查看更多关于在Angular中，如果权限值是异步请求所得，如何将其设置为HTTP请求头的Authorizatio的详细内容...