方案1. 使用Angular  http

import {Injectable} from '@angular/core';
import {Http, Headers} from '@angular/http'; @Injectable()
export class HttpClient { constructor(private http: Http) {} createAuthorizationHeader(headers: Headers) {
headers.append('Authorization', 'Basic ' +
btoa('username:password'));
} get(url) {
let headers = new Headers();
this.createAuthorizationHeader(headers);
return this.http.get(url, {
headers: headers
});
} post(url, data) {
let headers = new Headers();
this.createAuthorizationHeader(headers);
return this.http.post(url, data, {
headers: headers
});
}
}

方案2.Angular 4.3.x及更高版本可以执行如下操作来添加请求头

2.1拦截器设置

import {
HttpEvent,
HttpInterceptor,
HttpHandler,
HttpRequest,
} from '@angular/common/http'; export class AddHeaderInterceptor implements HttpInterceptor {
intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
// Clone the request to add the new header
const clonedRequest = req.clone({ headers: req.headers.set('Authorization', 'Bearer 123') }); // Pass the cloned request instead of the original request to the next handle
return next.handle(clonedRequest);
}
}

2.2创建拦截器后,您应该使用HTTP_INTERCEPTORS提供的注册。

import { HTTP_INTERCEPTORS } from '@angular/common/http';

@NgModule({
providers: [{
provide: HTTP_INTERCEPTORS,
useClass: AddHeaderInterceptor,
multi: true,
}],
})
export class AppModule {}

方案3.配置扩展BaseRequestOptions

3.1配置代码如下

import {provide} from 'angular2/core';
import {bootstrap} from 'angular2/platform/browser';
import {HTTP_PROVIDERS, Headers, Http, BaseRequestOptions} from 'angular2/http'; import {AppCmp} from './components/app/app'; class MyRequestOptions extends BaseRequestOptions {
constructor () {
super();
this.headers.append('My-Custom-Header','MyCustomHeaderValue');
}
} bootstrap(AppCmp, [
ROUTER_PROVIDERS,
HTTP_PROVIDERS,
provide(RequestOptions, { useClass: MyRequestOptions })
]);

3.2添加请求头

this.http._defaultOptions.headers.append('Authorization', 'token');
或者
this.http._defaultOptions.headers.set('Authorization', 'token');

3.3删除请求头

this.http._defaultOptions.headers.delete('Authorization');

参考来源:https://www.itranslater.com/qa/details/2112366855208829952

Angular在用户登录后设置授权请求头headers.append('Authorization', 'token');的更多相关文章

  1. Retrofit2 + OkHttp3设置Http请求头(Headers)方法汇总

    在构建网络层时会遇到一个问题就是要手动配置Http请求的Headers,写入缓存Cookie,自定义的User-Agent等参数,但是对于有几十个接口的网络层,我才不想用注解配置Headers,目前网 ...

  2. 如何修改linux 用户登录后默认目录

    1.linux用户登录后默认目录是在/etc/passwd文件设置的.如下图所示,一共显示了四行数据,其中第一行的/root即为root用户登录后的默认目录,第二行daemon用户的默认目录是/usr ...

  3. Linux下文件 ~/.bashrc 和 ~/.bash_profile 和 /etc/bashrc 和 /etc/profile 的区别 | 用户登录后加载配置文件的顺序

    转自 https://blog.csdn.net/secondjanuary/article/details/9206151 文件说明: /ect/profile 此文件为系统的每个用户设置环境信息, ...

  4. 【Java】系统漏洞:关于用户登录后操作的注意事项

    项目背景: SpringMVC + Mybatis  + MySql数据库(javaWeb项目开发) 相关模块:登录,个人详细信息修改,订单详情查询 相关漏洞介绍: 1.登录的验证码:登录的验证码一定 ...

  5. WordPress用户登录后重定向到指定页面

    这篇文章将向您展示WordPress用户登录后如何重定向到指定页面或者文章的技巧. 一.重定向到网站管理面板. 将以下代码添加到您的当前主题的 functions.php 文件中: function  ...

  6. js 中ajax请求时设置 http请求头中的x-requestd-with= ajax

    今天发现 AngularJS 框架的$http服务提供的$http.get() /$http.post()的ajax请求中没有带 x-requested-with字段. 这样的话,后端的php 就无法 ...

  7. selenium.Phantomjs设置浏览器请求头

    from selenium import webdriver from selenium.webdriver.common.desired_capabilities import DesiredCap ...

  8. php设置http请求头信息和响应头信息

    php设置http请求头信息和响应头信息 设置请求服务器的头信息可以用fsockopen,curl组件,header函数只能用来设置客户端响应的头信息,不能设置服务器的头信息. 例子;  一.head ...

  9. Devexpress xaf针对某个用户登录后在面板中设置导航无效的解决方法

    Devexpress xaf框架生成的项目默认情况下导航栏是显示在左侧,有时候我们用某个账户登录后,发现导航栏无法显示在左侧,操作十分不方便.我们可以去数据库删除当前登录用户的自定义布局 解决方法如下 ...

  10. angular学习笔记(二十四)-$http(2)-设置http请求头

    1. angular默认的请求头: 其中,Accept 和 X-Requested-With是$http自带的默认配置 Accept:application/json,text/plain       ...

随机推荐

  1. C# 8.0 中的 Disposable ref structs(可处置的 ref 结构)

    官方文档中的解释:   用 ref 修饰符声明的 struct 可能无法实现任何接口,因此无法实现 IDisposable. 因此,要能够处理 ref struct,它必须有一个可访问的 void D ...

  2. Golang 加密方法

    如果想直接使用我下列的库 可以直接go get 我的github go get -u github.com/hybpjx/InverseAlgorithm md5 加密--不可逆 MD5信息摘要算法是 ...

  3. Elasticsearch Analyzer 内置分词器

    Elasticsearch Analyzer 内置分词器 篇主要介绍一下 Elasticsearch中 Analyzer 分词器的构成 和一些Es中内置的分词器 以及如何使用它们 前置知识 es 提供 ...

  4. JAVA的File对象

    文件 1.File对象 java封装的一个操作文件及文件夹(目录)的对象.可以操作磁盘上的任何一个文件和文件夹. 2.创建文件  方式一:根据路径构建一个File对象new File(path) // ...

  5. Go语言核心36讲49

    我们在上一篇文章中简单地讨论了网络编程和socket,并由此提及了Go语言标准库中的syscall代码包和net代码包. 我还重点讲述了net.Dial函数和syscall.Socket函数的参数含义 ...

  6. python(牛客)试题解析1 - 简单

    导航: 一.NC103 反转字符串 二.NC141 判断是否为回文字符串 三.NC151 最大公约数 四.NC65 斐波那契数列 五.字符按排序后查看第k个最小的字母 六.数组内取出下标相同的元素求和 ...

  7. MinioAPI浅入及问题

    MinioAPI浅入及问题 bucketExists(BucketExistsArgs args) boolean 判断桶是否存在 返回boolean boolean gxshuju = minioC ...

  8. 我开发的开源项目,让.NET7中的EFCore更轻松地使用强类型Id

    在领域驱动设计(DDD)中,有一个非常重要的概念:"强类型Id".使用强类型Id来做标识属性的类型会比用int.Guid等通用类型能带来更多的好处.比如有一个根据根据Id删除用户的 ...

  9. Java基础知识篇【gitee】

    https://snailclimb.gitee.io/javaguide 一.Java基本功 Java一次编译,字节码通过JVM,处处运行jsp会转化为servlet,也要由jdk编译OracleJ ...

  10. node-sass报错(Node Sass could not find a binding for your current environment)

    解决方案:参考 https://stackoverflow.com/questions/37986800/node-sass-couldnt-find-a-binding-for-your-curre ...