如何在 angular 6 中发送 JWT 令牌作为授权 header
How to send JWT token as authorization header in angular 6
目前我在组件 .ts 文件中使用了这个静态代码,但这个代码不起作用。它 returns 未经授权(401)。但是当我将令牌作为查询字符串传递时,它工作正常。请给出组件 .ts 文件的工作示例。
import { HttpClient, HttpResponse ,HttpHeaders} from '@angular/common/http';
var t=`eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJpc3MiOiJodHRwOlwvXC9sb2NhbGhvc3Q6ODAwMFwvYXBpXC9sb2dpbiIsImlhdCI6MTUzNzcxNTMyNSwiZXhwIjoxNTM3NzE4OTI1LCJuYmYiOjE1Mzc3MTUzMjUsImp0aSI6IlBKWVhnSkVyblQ0WjdLTDAiLCJzdWIiOjYsInBydiI6Ijg3ZTBhZjFlZjlmZDE1ODEyZmRlYzk3MTUzYTE0ZTBiMDQ3NTQ2YWEifQ.1vz5lwPlg6orzkBJijsbBNZrnFnUedsGJUs7BUs0tmM`;
var headers_object = new HttpHeaders();
headers_object.append('Content-Type', 'application/json');
headers_object.append("Authorization", "Bearer " + t);
const httpOptions = {
headers: headers_object
};
this.http.post(
'http://localhost:8000/api/role/Post', {limit:10}, httpOptions
).subscribe(resp => {
this.roles = console.log(resp)
}
);
添加 AuthInterceptor
将拦截您所有的 http 请求并将令牌添加到其 headers:
import { Injectable } from '@angular/core';
import { HttpEvent, HttpHandler, HttpInterceptor, HttpRequest } from '@angular/common/http';
import { Observable } from 'rxjs';
@Injectable()
export class AuthInterceptor implements HttpInterceptor {
intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
const token = localStorage.token; // you probably want to store it in localStorage or something
if (!token) {
return next.handle(req);
}
const req1 = req.clone({
headers: req.headers.set('Authorization', `Bearer ${token}`),
});
return next.handle(req1);
}
}
然后在您的AppModule
中注册:
@NgModule({
declarations: [...],
imports: [...],
providers: [
{ provide: HTTP_INTERCEPTORS, useClass: AuthInterceptor, multi: true },
],
bootstrap: [ AppComponent ],
})
export class AppModule { }
关于拦截器的更多信息:
https://angular.io/guide/http#intercepting-requests-and-responses
你的代码的问题是 HttpHeaders
class 是不可变的,所以当你调用 append
它实际上 returns 一个具有指定值的新实例,但不修改原始对象。
试试这个
var headers_object = new HttpHeaders().set("Authorization", "Bearer " + t);
Content-Type 默认设置为 json HttpClient
如果您需要在所有 API 调用中发送授权令牌,那么最好按照 Martin
的建议使用拦截器
请像这样创建 HttpHeaders 对象(而不是附加),
var t="eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJpc3MiOiJodHRwOlwvXC9sb2NhbGhvc3Q6ODAwMFwvYXBpXC9sb2dpbiIsImlhdCI6MTUzNzcxNTMyNSwiZXhwIjoxNTM3NzE4OTI1LCJuYmYiOjE1Mzc3MTUzMjUsImp0aSI6IlBKWVhnSkVyblQ0WjdLTDAiLCJzdWIiOjYsInBydiI6Ijg3ZTBhZjFlZjlmZDE1ODEyZmRlYzk3MTUzYTE0ZTBiMDQ3NTQ2YWEifQ.1vz5lwPlg6orzkBJijsbBNZrnFnUedsGJUs7BUs0tmM";
var headers_object = new HttpHeaders({
'Content-Type': 'application/json',
'Authorization': "Bearer "+t)
});
const httpOptions = {
headers: headers_object
};
this.http.post(
'http://localhost:8000/api/role/Post', {limit:10}, httpOptions
).subscribe(resp => {
this.roles = console.log(resp)
}
);
import { Injectable } from '@angular/core';
import {
HttpEvent, HttpInterceptor, HttpHandler, HttpRequest
} from '@angular/common/http';
import { Observable } from 'rxjs';
/** Pass untouched request through to the next request handler. */
@Injectable()
export class NoopInterceptor implements HttpInterceptor {
intercept(req: HttpRequest<any>, next: HttpHandler):
Observable<HttpEvent<any>> {
return next.handle(req);
}
}
拦截器能够在您的 Header
中添加令牌
通过 URL 波纹管
https://angular.io/guide/http#intercepting-requests-and-responses
另一个解决方案是使用angular-jwt:https://github.com/auth0/angular2-jwt
无需创建拦截器,只需更新您的 AppModule:
import { JwtModule } from "@auth0/angular-jwt";
import { HttpClientModule } from "@angular/common/http";
export function tokenGetter() {
return localStorage.getItem('access_token');
}
@NgModule({
declarations: [
AppComponent
],
imports: [
HttpClientModule,
JwtModule.forRoot({
config: {
tokenGetter: tokenGetter,
allowedDomains: ['localhost:3000', 'example.com'],
disallowedRoutes: ["http://example.com/examplebadroute/"],
authScheme: "Bearer " // Default value
}
})
],
bootstrap: [AppComponent]
})
export class AppModule { }
Any requests sent using Angular's HttpClient will automatically have a
token attached as an Authorization header.
目前我在组件 .ts 文件中使用了这个静态代码,但这个代码不起作用。它 returns 未经授权(401)。但是当我将令牌作为查询字符串传递时,它工作正常。请给出组件 .ts 文件的工作示例。
import { HttpClient, HttpResponse ,HttpHeaders} from '@angular/common/http';
var t=`eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJpc3MiOiJodHRwOlwvXC9sb2NhbGhvc3Q6ODAwMFwvYXBpXC9sb2dpbiIsImlhdCI6MTUzNzcxNTMyNSwiZXhwIjoxNTM3NzE4OTI1LCJuYmYiOjE1Mzc3MTUzMjUsImp0aSI6IlBKWVhnSkVyblQ0WjdLTDAiLCJzdWIiOjYsInBydiI6Ijg3ZTBhZjFlZjlmZDE1ODEyZmRlYzk3MTUzYTE0ZTBiMDQ3NTQ2YWEifQ.1vz5lwPlg6orzkBJijsbBNZrnFnUedsGJUs7BUs0tmM`;
var headers_object = new HttpHeaders();
headers_object.append('Content-Type', 'application/json');
headers_object.append("Authorization", "Bearer " + t);
const httpOptions = {
headers: headers_object
};
this.http.post(
'http://localhost:8000/api/role/Post', {limit:10}, httpOptions
).subscribe(resp => {
this.roles = console.log(resp)
}
);
添加 AuthInterceptor
将拦截您所有的 http 请求并将令牌添加到其 headers:
import { Injectable } from '@angular/core';
import { HttpEvent, HttpHandler, HttpInterceptor, HttpRequest } from '@angular/common/http';
import { Observable } from 'rxjs';
@Injectable()
export class AuthInterceptor implements HttpInterceptor {
intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
const token = localStorage.token; // you probably want to store it in localStorage or something
if (!token) {
return next.handle(req);
}
const req1 = req.clone({
headers: req.headers.set('Authorization', `Bearer ${token}`),
});
return next.handle(req1);
}
}
然后在您的AppModule
中注册:
@NgModule({
declarations: [...],
imports: [...],
providers: [
{ provide: HTTP_INTERCEPTORS, useClass: AuthInterceptor, multi: true },
],
bootstrap: [ AppComponent ],
})
export class AppModule { }
关于拦截器的更多信息:
https://angular.io/guide/http#intercepting-requests-and-responses
你的代码的问题是 HttpHeaders
class 是不可变的,所以当你调用 append
它实际上 returns 一个具有指定值的新实例,但不修改原始对象。
试试这个
var headers_object = new HttpHeaders().set("Authorization", "Bearer " + t);
Content-Type 默认设置为 json HttpClient
如果您需要在所有 API 调用中发送授权令牌,那么最好按照 Martin
的建议使用拦截器请像这样创建 HttpHeaders 对象(而不是附加),
var t="eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJpc3MiOiJodHRwOlwvXC9sb2NhbGhvc3Q6ODAwMFwvYXBpXC9sb2dpbiIsImlhdCI6MTUzNzcxNTMyNSwiZXhwIjoxNTM3NzE4OTI1LCJuYmYiOjE1Mzc3MTUzMjUsImp0aSI6IlBKWVhnSkVyblQ0WjdLTDAiLCJzdWIiOjYsInBydiI6Ijg3ZTBhZjFlZjlmZDE1ODEyZmRlYzk3MTUzYTE0ZTBiMDQ3NTQ2YWEifQ.1vz5lwPlg6orzkBJijsbBNZrnFnUedsGJUs7BUs0tmM";
var headers_object = new HttpHeaders({
'Content-Type': 'application/json',
'Authorization': "Bearer "+t)
});
const httpOptions = {
headers: headers_object
};
this.http.post(
'http://localhost:8000/api/role/Post', {limit:10}, httpOptions
).subscribe(resp => {
this.roles = console.log(resp)
}
);
import { Injectable } from '@angular/core';
import {
HttpEvent, HttpInterceptor, HttpHandler, HttpRequest
} from '@angular/common/http';
import { Observable } from 'rxjs';
/** Pass untouched request through to the next request handler. */
@Injectable()
export class NoopInterceptor implements HttpInterceptor {
intercept(req: HttpRequest<any>, next: HttpHandler):
Observable<HttpEvent<any>> {
return next.handle(req);
}
}
拦截器能够在您的 Header
中添加令牌通过 URL 波纹管 https://angular.io/guide/http#intercepting-requests-and-responses
另一个解决方案是使用angular-jwt:https://github.com/auth0/angular2-jwt
无需创建拦截器,只需更新您的 AppModule:
import { JwtModule } from "@auth0/angular-jwt";
import { HttpClientModule } from "@angular/common/http";
export function tokenGetter() {
return localStorage.getItem('access_token');
}
@NgModule({
declarations: [
AppComponent
],
imports: [
HttpClientModule,
JwtModule.forRoot({
config: {
tokenGetter: tokenGetter,
allowedDomains: ['localhost:3000', 'example.com'],
disallowedRoutes: ["http://example.com/examplebadroute/"],
authScheme: "Bearer " // Default value
}
})
],
bootstrap: [AppComponent]
})
export class AppModule { }
Any requests sent using Angular's HttpClient will automatically have a token attached as an Authorization header.