如何在角度中使用 jwt/拦截器进行登录/注册方法

Question

我正在创建一个寄存器和登录方法。我使用拦截器，但它是错误 401。我没有获得设置标头的令牌。

这是我的代码：https://stackblitz.com/github/ntgiang4991/jwt

File token.interceptor.ts：

intercept(request: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
console.log(request);
let token = localStorage.getItem('token');
request = this.addToken(request, token)
return next.handle(request);
}
private addToken(request: HttpRequest<any>, token: string){
return request.clone({
setHeaders: {
'Authorization': `Token ${token}`,
'Content-type': 'application/json; charset=utf-8'
},
})
}

File auth.service.ts

constructor(
private http: HttpClient,
private jwt: JwtService
) { }
login(email: string, password: string) {
return this.http.post('https://conduit.productionready.io/api/users/login', { email, password });
}
register(username: string, email: string, password: string) {
return this.http.post<{ token: string }>('https://conduit.productionready.io/api/users', { username, email, password }).pipe(tap(res => {
this.login(email, password)
}))
}
logout() {
localStorage.removeItem('token');
}
public get loggedIn(): boolean {
return localStorage.getItem('token') !== null;
}

文件注册.组件.html

<div class="row">
<div class="col-md-6 mx-auto">
<div class="card rounded-0 mt-5">
<div class="card-header">
<h3 class="mb-0">Register</h3>
</div>
<div class="card-body">
<form action="" class="form">
<div class="form-group">
<label for="username">Username</label>
<input [(ngModel)]="registerUserData.username" name="username" type="text" required class="form-control rounded-0">
</div>
<div class="form-group">
<label for="email">Email</label>
<input [(ngModel)]="registerUserData.email" name="email" type="text" required class="form-control rounded-0">
</div>
<div class="form-group">
<label for="password">Password</label>
<input [(ngModel)]="registerUserData.password" name="password" type="password" required class="form-control rounded-0">
</div>
<button (click)="registerUser()" type="button" class="btn btn-primary">Register</button>
</form>
</div>
</div>
</div>
</div>

File register.component.ts

registerUser() {
console.log(this.registerUserData.username, this.registerUserData.email, this.registerUserData.password);
this._auth.register(this.registerUserData.username, this.registerUserData.email, this.registerUserData.password).subscribe(
res => console.log(res),
err => console.log(err)
);
}

Answer 1

在设置标头以实时更新标头后，您已经初始化了可以通过调用headers.keys()来完成的标头

这是更新的addToken方法：

private addToken(request: HttpRequest<any>, token: string){
const newReq = request.clone({
setHeaders: {
'Authorization': `Token ${token}`,
'Content-type': 'application/json; charset=utf-8'
},
})
newReq.headers.keys();
return newReq;  
}

Answer 2

我认为这是一个承载令牌。

export class TokenInterceptor implements HttpInterceptor {
constructor(public auth: AuthService) { }
intercept(request: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
let token = localStorage.getItem('token');
if (token) {
const myRequest =  request.clone({
setHeaders: {
'Authorization': `Bearer ${token}`
}
});
return next.handle(myRequest);
}
return next.handle(request);
}
}

Answer 3

试试这个中间：

import { Injectable } from '@angular/core';
import {
HttpRequest,
HttpHandler,
HttpEvent,
HttpInterceptor,
HttpResponse,
HttpErrorResponse
} from '@angular/common/http';
import { catchError, map } from 'rxjs/operators';
import { AuthService } from './auth.service';
import { Observable, throwError } from 'rxjs';
@Injectable()
export class TokenInterceptor implements HttpInterceptor {
constructor(public auth: AuthService) { }
intercept(request: HttpRequest<any>, next: HttpHandler) {
console.log(request);
let token = localStorage.getItem('token');
if (token) {
let clonedReq = this.addToken(request, token);
return next.handle(clonedReq).pipe(
map((event: HttpEvent<any>) => {
if (event instanceof HttpResponse) {
console.log('event-body-->>>', event.body);
}
return event;
}),
catchError((error: HttpErrorResponse) => {
console.log('error',error);
return throwError(error.error);
}));
} else {
return next.handle(request);
}
}
private addToken(request: HttpRequest<any>, token: any) {
if (token) {
let clone: HttpRequest<any>;
clone = request.clone({
setHeaders: {
'Authorization': `Token ${token}`,
'Content-type': 'application/json; charset=utf-8'
}
});
return clone;
}
return request;
}
}