在Angular中,如果权限值是异步请求所得,如何将其设置为HTTP请求头的Authorization?
遇到此问题的背景:项目需要实现单点登录,在前后端分离的前提下,前台如何保存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值权限头
在Angular中,如果权限值是异步请求所得,如何将其设置为HTTP请求头的Authorization?的更多相关文章
- angular中的$q.defer()服务异步处理
jquery和angular都有defer服务,我暂以angular为例谈谈我的理解,最后并附上jquery的阮一峰总结的defer. 以我目前项目的部分代码为例说明为什么要用deferred. fu ...
- angular源码分析:angular中$rootscope的实现——scope的一生
在angular中,$scope是一个关键的服务,可以被注入到controller中,注入其他服务却只能是$rootscope.scope是一个概念,是一个类,而$rootscope和被注入到cont ...
- Angular中的jsonp
1.一般我们使用Angualr中的jsonp值这样使用的:注入$http服务 这样使用jsonp的方式可以支持多数api,但是douban不支持无法使用 module.controller('InTh ...
- 形象的讲解angular中的$q与promise(转)
以下内容摘自http://www.ngnice.com/posts/126ee9cf6ddb68 promise不是angular首创的,作为一种编程模式,它出现在……1976年,比js还要古老得多. ...
- angular中的promise
angular中的promise用法 标签(空格分隔): angular 前言 Promise其实是一个规范,用类似then().then()这样的链式调用形式来处理因为异步带来意大利面条式的代码(多 ...
- 【响应式编程的思维艺术】 (5)Angular中Rxjs的应用示例
目录 一. 划重点 二. Angular应用中的Http请求 三. 使用Rxjs构建Http请求结果的处理管道 3.1 基本示例 3.2 常见的操作符 四. 冷热Observable的两种典型场景 4 ...
- angular 2+ 变化检测系列三(Zone.js在Angular中的应用)
在系列一中,我们提到Zone.js,Zones是一种执行上下文,它允许我们设置钩子函数在我们的异步任务的开始位置和结束位置,Angular正是利用了这一特性从而实现了变更检测. Zones.js非常适 ...
- angular中的表单数据自定义验证
之前说过了angular是如何给表单的数据进行基本的,常用的验证的:angular学习笔记(二十)-表单验证 但是在实际工作中,这些验证是远远不够的,很多时候我们需要自定义一些验证规则,以及一些异步, ...
- Angular中的$q的形象解释及深入用法
作者:寸志链接:https://zhuanlan.zhihu.com/p/19622332来源:知乎著作权归作者所有.商业转载请联系作者获得授权,非商业转载请注明出处. 早上,老爸说:“儿子,天气如何 ...
随机推荐
- IOC:AutoFac使用demo
使用autofac 实现依赖注入 1.引用 autofac.dll 和 autofac.configuration.dll 2.新增接口 IDAL using System; using System ...
- Java中String的split()方法的一些需要注意的地方
public String[] split(String regex, int limit) split函数是用于使用特定的切割符(regex)来分隔字符串成一个字符串数组,这里我就不讨论第二个参数( ...
- bzoj3571————2016——3——12(最小乘积匹配)
bzoj3571 传送门http://www.lydsy.com/JudgeOnline/problem.php?id=3571 题解: ——————来自伟大的thy大神 http://blog.c ...
- java短路问题
java短路问题 短路运算符就是我们常用的"&&"."||",一般称为"条件操作". class Logic{ public ...
- IOS 程序图标添加数字
+(void)setAppIconNumber:(NSInteger)num{ if ([UIParam getIOSVersion]>8.0) { UIUserNotificationSett ...
- IOS 消息
发送消息: NSDictionary *dict=[[NSDictionary alloc]initWithObjectsAndKeys:@"num",[NSString stri ...
- mysql 子查询优化
今天用到要查询七天内都没有装机的门店信息,首先想到了用not in,先把装机的userid查出来,然后再id not in,但是这样就必须使用子查询,数据量少还可以,数据量大了的话,肯定效率特别低,因 ...
- Spring mvc基本原理
http://blog.csdn.net/xtu_xiaoxin/article/details/8796499 http://www.cnblogs.com/wawlian/archive/2012 ...
- SVG的基础使用
SVG的基础使用: <%@ page language="java" contentType="text/html; charset=UTF-8" pag ...
- jQuery基本过滤选择器
jQuery基本过滤选择器: <h1>this is h1</h1> <div id="p1"> <h2>this is h2< ...