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