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

时间:2021-10-27 00:09:10

遇到此问题的背景:项目需要实现单点登录,在前后端分离的前提下,前台如何保存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?的更多相关文章

  1. angular中的$q.defer()服务异步处理

    jquery和angular都有defer服务,我暂以angular为例谈谈我的理解,最后并附上jquery的阮一峰总结的defer. 以我目前项目的部分代码为例说明为什么要用deferred. fu ...

  2. angular源码分析:angular中$rootscope的实现——scope的一生

    在angular中,$scope是一个关键的服务,可以被注入到controller中,注入其他服务却只能是$rootscope.scope是一个概念,是一个类,而$rootscope和被注入到cont ...

  3. Angular中的jsonp

    1.一般我们使用Angualr中的jsonp值这样使用的:注入$http服务 这样使用jsonp的方式可以支持多数api,但是douban不支持无法使用 module.controller('InTh ...

  4. 形象的讲解angular中的$q与promise(转)

    以下内容摘自http://www.ngnice.com/posts/126ee9cf6ddb68 promise不是angular首创的,作为一种编程模式,它出现在……1976年,比js还要古老得多. ...

  5. angular中的promise

    angular中的promise用法 标签(空格分隔): angular 前言 Promise其实是一个规范,用类似then().then()这样的链式调用形式来处理因为异步带来意大利面条式的代码(多 ...

  6. 【响应式编程的思维艺术】 (5)Angular中Rxjs的应用示例

    目录 一. 划重点 二. Angular应用中的Http请求 三. 使用Rxjs构建Http请求结果的处理管道 3.1 基本示例 3.2 常见的操作符 四. 冷热Observable的两种典型场景 4 ...

  7. angular 2+ 变化检测系列三(Zone.js在Angular中的应用)

    在系列一中,我们提到Zone.js,Zones是一种执行上下文,它允许我们设置钩子函数在我们的异步任务的开始位置和结束位置,Angular正是利用了这一特性从而实现了变更检测. Zones.js非常适 ...

  8. angular中的表单数据自定义验证

    之前说过了angular是如何给表单的数据进行基本的,常用的验证的:angular学习笔记(二十)-表单验证 但是在实际工作中,这些验证是远远不够的,很多时候我们需要自定义一些验证规则,以及一些异步, ...

  9. Angular中的$q的形象解释及深入用法

    作者:寸志链接:https://zhuanlan.zhihu.com/p/19622332来源:知乎著作权归作者所有.商业转载请联系作者获得授权,非商业转载请注明出处. 早上,老爸说:“儿子,天气如何 ...

随机推荐

  1. 如何在 ASP.NET 4.6 与 IIS10 中运用 HTTP/2 ?

    在过去十年中,Web 技术已经取得了种种进展.从基本的 HTML 开始,网页发展出更丰富的外观和感觉,变得更加直观,对用户更加友好并且越来越大放异彩.这些变化的关键贡献来自于一些新的和翻新技术,且借力 ...

  2. .net DropDownList静态联动

    1.前台 <span id="spnClient" style="margin-left: 30px; margin-top: 10px"> &lt ...

  3. 集群节点间网络通信TIPC

    1. TIPC背景介绍 TIPC主要是用于集群网络环境之中,它这个协议有一些前提假设包括: 协议发送的大部分message都是直接到达目的地(无路由): message的传输时间都很短; messag ...

  4. 【转】globk通常的应用

    1.重复性分析(glred) -单独的观测期 -联合的观测期 2.联合多期数据得到基于实验的平均位置 -联合单独观测的测站 3.联合平均位置估计速度或地震偏移和震后运动 卡尔曼滤波 1.等同于序贯最小 ...

  5. 实战 EF(LINQ) 如何以子查询的形式来 Join

    如题,大多数网上关于 LINQ Join 的示例都是以 from x in TableA  join ... 这样的形式,这种有好处,也有劣势,就是在比如我们使用的框架如果已经封装了很多方法,比如分页 ...

  6. web安全类

    web安全类主要分为两个部分:CSRF和XSS 一.CSRF 基本概念:CSRF,通常称为跨站请求伪造,英文名Cross-site request forgery 缩写为CSRF; 怎么防御 1.To ...

  7. Linux上的文件管理类命令(2)

    Linux上的文件管理类命令都有哪些,其常用的使用方法及其相关示例演示: wc 统计文件中的字节数.单词数.行数.并将统计结果显示输出 -c, --bytes 打印字节数 [root@qingchen ...

  8. 关于haproxy多域名证书的配置

    frontend main bind *: bind *: ssl crt /etc/haproxy/kong.com.pem crt /etc/haproxy/51yijI.com.pem no-s ...

  9. jquery和js中走的弯路

    1.$.each的错误用法 $.each的return xx 不能结束外层的函数,但return true/false可以 所以一般的: var result; $.each(json,functio ...

  10. java学习笔记—ServletConfig、ServletContext接口(13)

    ServletConfig是一个由Tomcat服务器在初始化Servlet的时候创建并传递进来的一个对象. 该对象主要描述的时候一个servlet的配置信息. 如: <servlet>  ...