Question

我正在接受评估，这是求职申请的一部分。该任务是创建一个有角度的应用程序，它将使用给定的JWT令牌从指定的api获取数据。

我以前没有使用过JWT令牌，因此我不确定在Angular应用程序中处理这些令牌的最佳方法是什么。如果有什么不同，我正在使用Angular 6。

当前，我只是在服务中对其进行硬编码，并将其作为请求的一部分发送到标头中。如下所示：我觉得在处理此问题方面必须有某种最佳实践。有人可以分享如何做吗？

export class MyService {

  private readonly _apiPath = `https://my.address.com/api/products`;

  private readonly _headers = new HttpHeaders({
    'authorization': `Bearer andVeryLongJWTTokenHere`});

  constructor(private http: HttpClient) {
  }

  getProducts(): Observable<Product[]> {
      return this.http.get<Product[]>(`${this._apiPath}`, { headers: this._headers });
  }

}

Answer 1

这就是我的工作，我使用HttpInterceptor的自定义实现，这样，每个HTTP请求都将具有令牌，如果没有，则该请求将正常继续。

import { Injectable } from "@angular/core";
import { HttpInterceptor, HttpEvent, HttpHandler, HttpRequest } from "@angular/common/http";
import { Observable } from "rxjs";
//Service where I handle the token
import { UserSettings } from "./user.settings";

@Injectable()
export class AuthInterceptor implements HttpInterceptor{

    constructor(private userSettings: UserSettings){}

    intercept(req: HttpRequest<any>, next: HttpHandler) : Observable<HttpEvent<any>>{
        //Check if the user is authenticated, if true, append the token   
        if(this.userSettings.isAuthenticated()){
            //Get the token
            let token: string = this.userSettings.getSessionToken();
            //Clone the original request (to be able to modify it)
            let clonedReq: HttpRequest<any> = req.clone({
                setHeaders: {'Authorization':'Bearer ' + token }
            });
            //Return the cloned request with the token
            return next.handle(clonedReq);
        }
        //At this point, the user is not authenticated, so I send the original request
        else{
            return next.handle(req);
        }        
    }
}

并在模块的providers数组中：

providers: [
    { provide: HTTP_INTERCEPTORS, useClass: AuthInterceptor, multi: true, },
],

为了存储令牌，目前我使用LocalStorage，但是我读了一些博客文章，主要出于安全原因不这样做：

页面上的任何JavaScript代码都可以访问本地存储：它没有任何数据保护功能。 This is the big one for security reasons. That is pretty bad.

在Angular应用中存储JWT的标准做法是什么？

1 个答案: