Какова стандартная практика хранения JWT в приложении Angular?

Question

Я принимаю оценку как часть заявления о приеме на работу. Задача состоит в том, чтобы создать угловое приложение, которое будет извлекать данные из указанного API, используя данный токен JWT.

Раньше я не использовал токен 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: [
    { provide: HTTP_INTERCEPTORS, useClass: AuthInterceptor, multi: true, },
],

Для хранения токена в данный момент я использую LocalStorage, но я прочитал пару постов в блоге о том, как этого не делать, в основном из соображений безопасности:

Любой код JavaScript на вашей странице может получить доступ к локальному хранилищу: он не имеет никакой защиты данных. Это большой по соображениям безопасности. Это очень плохо.