web-dev-qa-db-ja.com

Angular 5HttpInterceptorおよびヘッダーでの認証トークンの送信

私のフローはログインページ->ホームページです。

ログインページにはトークンがありません。ログイン後、サーバーがトークンを提供し、ユーザーはホームページにリダイレクトされます。

ホームページはトークンをサーバーに送信し、トークンは検証され、サーバーはフロントエンドに表示するデータを送り返します。

問題：

ログイン要求時に発火するHttpInterceptorCannot read property 'token' of null。インターセプターにログインAPIリクエストを無視させ、トークンが存在する場合にのみ後続の呼び出しでインターセプトさせたいと思います。

angularhttp-headersjwtangular5angular-http-interceptors
4
Vincent Nguyen

こんにちは、ヘッダーにキー値を入れてログインを他のリクエストと区別し、インターセプターを作成してそのキーが存在するかどうかを確認してトークンを削除できます

import { HttpClient, HttpHeaders } from '@angular/common/http';
...
login(username, password) {
    let headers = new HttpHeaders();
    headers = headers.append('noToken', 'noToken');
    return this.http.post(loginUrl, data, {headers: headers})
    ...
}

次に、インターセプターを作成します

export class TokenInterceptor implements HttpInterceptor {
constructor() {}

intercept(httpReq: HttpRequest<any>, next: HttpHandler): 
 Observable<HttpEvent<any>> {
 let headers = httpReq.headers
  .set('Content-Type', 'application/json');

 if (headers.get('noToken') === 'noToken') {
   headers = headers.delete('Authorization').delete('noToken');
 }

 const newReq = httpReq.clone({headers: headers});

 return next.handle(newReq);
 }
}

それをアプリモジュールプロバイダーに追加します

import { TokenInterceptor } from './token.interceptor';

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

実用的なソリューション

auth.interceptor.ts

export class AuthInterceptor implements HttpInterceptor {
    constructor(public auth: HouseaccountsService) { }

    intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
        if(req.headers.get('notoken') !== 'noToken') {
            req = req.clone({
                setHeaders: {
                    Authorization: JSON.parse(localStorage.getItem('currentUser')).token
                }
            });
        }

        return next.handle(req);
    }
}

service.ts

login(user) {
        let loginHeaders = {
            headers: new HttpHeaders({
                'Content-Type': 'application/json',
                'noToken': 'noToken'
            })
        }
        return this.http.post<any>(this.url + '/login', JSON.stringify(user), loginHeaders);
    }
7
Fateh Mohamed