Angular在用户登录后设置授权请求头headers.append('Authorization', 'token');
方案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');的更多相关文章
- Retrofit2 + OkHttp3设置Http请求头(Headers)方法汇总
在构建网络层时会遇到一个问题就是要手动配置Http请求的Headers,写入缓存Cookie,自定义的User-Agent等参数,但是对于有几十个接口的网络层,我才不想用注解配置Headers,目前网 ...
- 如何修改linux 用户登录后默认目录
1.linux用户登录后默认目录是在/etc/passwd文件设置的.如下图所示,一共显示了四行数据,其中第一行的/root即为root用户登录后的默认目录,第二行daemon用户的默认目录是/usr ...
- Linux下文件 ~/.bashrc 和 ~/.bash_profile 和 /etc/bashrc 和 /etc/profile 的区别 | 用户登录后加载配置文件的顺序
转自 https://blog.csdn.net/secondjanuary/article/details/9206151 文件说明: /ect/profile 此文件为系统的每个用户设置环境信息, ...
- 【Java】系统漏洞:关于用户登录后操作的注意事项
项目背景: SpringMVC + Mybatis + MySql数据库(javaWeb项目开发) 相关模块:登录,个人详细信息修改,订单详情查询 相关漏洞介绍: 1.登录的验证码:登录的验证码一定 ...
- WordPress用户登录后重定向到指定页面
这篇文章将向您展示WordPress用户登录后如何重定向到指定页面或者文章的技巧. 一.重定向到网站管理面板. 将以下代码添加到您的当前主题的 functions.php 文件中: function ...
- js 中ajax请求时设置 http请求头中的x-requestd-with= ajax
今天发现 AngularJS 框架的$http服务提供的$http.get() /$http.post()的ajax请求中没有带 x-requested-with字段. 这样的话,后端的php 就无法 ...
- selenium.Phantomjs设置浏览器请求头
from selenium import webdriver from selenium.webdriver.common.desired_capabilities import DesiredCap ...
- php设置http请求头信息和响应头信息
php设置http请求头信息和响应头信息 设置请求服务器的头信息可以用fsockopen,curl组件,header函数只能用来设置客户端响应的头信息,不能设置服务器的头信息. 例子; 一.head ...
- Devexpress xaf针对某个用户登录后在面板中设置导航无效的解决方法
Devexpress xaf框架生成的项目默认情况下导航栏是显示在左侧,有时候我们用某个账户登录后,发现导航栏无法显示在左侧,操作十分不方便.我们可以去数据库删除当前登录用户的自定义布局 解决方法如下 ...
- angular学习笔记(二十四)-$http(2)-设置http请求头
1. angular默认的请求头: 其中,Accept 和 X-Requested-With是$http自带的默认配置 Accept:application/json,text/plain ...
随机推荐
- python中的字符串学习
# 1.字符串的下标(索引) # 取字符串中的子串 print('1.字符串的下标(索引)') str1 = 'PYTHON' print(str1[0]) print(str1[-4]) # 2.字 ...
- 「浙江理工大学ACM入队200题系列」问题 L: 零基础学C/C++52——计算数列和2/1,3/2,5/3,8/5......
本题是浙江理工大学ACM入队200题第五套中的L题 我们先来看一下这题的题面. 题面 题目描述 有一分数序列:2/1,3/2,5/3,8/5,13/8,21/13,-- 计算这个数列的前n项和.注意: ...
- perl之grep函数的用法
转载至 perl中grep的详细用法 grep有2种表达方式: 1 grep BLOCK LIST 2 grep EXPR, LIST BLOCK表示一个code块,通常用{}表示:EXPR表示一个表 ...
- 第2-3-4章 上传附件的接口开发-文件存储服务系统-nginx/fastDFS/minio/阿里云oss/七牛云oss
目录 5.3 接口开发-上传附件 5.3.1 接口文档 5.3.2 代码实现 5.3.3 接口测试 5.3 接口开发-上传附件 第2-1-2章 传统方式安装FastDFS-附FastDFS常用命令 第 ...
- 【云原生 · Kubernetes】apiserver高可用
个人名片: 因为云计算成为了监控工程师 个人博客:念舒_C.ying CSDN主页️:念舒_C.ying 7.1 高可用选型 ipvs+keepalived nginx+keepalived hap ...
- 【经验分享】配置用户通过Console口登录设备示例
组网需求 当用户无法进行远程登录设备时,可通过Console口进行本地登录.缺省情况下,使用Console用户界面登录设备时只需要密码认证.为了防止非法用户登录设备,修改Console用户界面的认证方 ...
- Bugku md5 collision
题目名字都叫md5碰撞,那就肯定和md5碰撞脱不了关系了 打开题目,首先让我们输入a 行吧,随意post一个a=1进去 结果提示flase 这里应该是有特殊值,我们找找看 查看源码,抓包 没找到 试试 ...
- day24-服务器端渲染技术02
服务器端渲染技术02 11.EL表达式 11.1EL表达式介绍 EL表达式全称:Expression Language,是表达式语言 EL表达式主要是代替jsp页面的表达式脚本 EL表达式输出数据时, ...
- UEFI引导linux启动过程的顺序,及修改办法
注意这里我说的是 uefi 启动 启动过程顺序 正常安装完一个Linux系统,硬盘会被分成俩个分区,一块是 fat32 文件系统(启动项存放位置),一块是ext4 文件系统(也就是系统真正的安装位置) ...
- CentOS Linux 的安装
CentOS Linux 的安装 作者:Grey 原文地址: 博客园:CentOS Linux 的安装 CSDN:CentOS Linux 的安装 说明 本安装说明是基于 Windows 10 下 V ...