私はAzure B2C認証を使用しています。リダイレクトが成功すると、アクセストークンはブラウザーのlocalStorageに格納され、その後のAPI呼び出しに格納されます。httpインターセプタークラスは認証トークンをすべての送信要求に添付することになっています。 localStorage.getItem()は、localStorageからauthトークンを読み取ろうとするとnullを返します。
eyJ0eXAiOiJKV1QiLCJhbGciOiJSUzI1NiIsImtpZCI6Ilg1ZVhrNHh5b2pORnVtMWtsMll0djhkbE5QNC1jNTdkTzZRR1RWQndhTmsifQ.eyJpc3MiOiJodHRwczovL2xvZ2luLm1pY3Jvc29mdG9ubGluZS5jb20vYmY5Njg3YWYtOTliMy00YzU3LWI2YjAtOWE5OGIzNTRhOWQyL3YyLjAvIiwiZXhwIjoxNTA0MTMxNzM3LCJuYmYiOjE1MDQxMjgxMzcsImF1ZCI6IjI4ZGM0NjZkLWRhZGUtNDNkMy04ZjBhLTJkYmNlNTQxYmIxMyIsIm9pZCI6IjcyMzljZWVjLTMzN2ItNDlmNS04YzViLTVkMzcwZGEwZmIxOCIsImdpdmVuX25hbWUiOiJaZWVzaGFuIiwiZmFtaWx5X25hbWUiOiJIYWlkZXIiLCJzdWIiOiJOb3Qgc3VwcG9ydGVkIGN1cnJlbnRseS4gVXNlIG9pZCBjbGFpbS4iLCJlbWFpbHMiOlsiWmVlc2hhbi5IYWlkZXJAY3JzcC5jaGlj:ここでは、コード、角4のカスタムhttpインターセプタ。 localStorage.getItem()がNULLを返します
import { HttpClient, HttpEvent, HttpHandler, HttpInterceptor, HttpRequest }
from '@angular/common/http';
import { Injectable } from '@angular/core';
import { Observable } from 'rxjs/Observable';
@Injectable()
export class HttpManagerInterceptor implements HttpInterceptor {
intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
req = req.clone({ headers: req.headers.set('Accept', 'application/json') });
req = req.clone({ headers: req.headers.set('X-CRSP-TOKEN', 'ToBeImplemented') });
// this line always returns null
const authToken = window.localStorage.getItem('auth_token');
console.log('Inside http interceptor. Access token: ' + authToken);
if (authToken) {
req = req.clone({ headers: req.headers.set('Authorization', `Bearer
${authToken}`) });
}
console.log(JSON.stringify(req.headers));
return next.handle(req);
}
コンソールログ
たトークンですHTTPのインターセプターインサイドYWdvYm9vdGguZWR1Il0sImF6cCI6IjI4ZGM0NjZkLWRhZGUtNDNkMy04ZjBhLTJkYmNlNTQxYmIxMyIsInZlciI6IjEuMCJ9.DUebFoHuzLXIbjMOmRrCRYswMB1g-7J6kVOaYyI3-b5AuaTjrcTtTsZkiGbloseaKqKtKoRtO72EkyQ2XvJ2lyhCBybpD4skeOcwQ2p_RBcO1dlFSoWIOkQK7WPN_f3tLxzuvKgrcPuR2LurB_n0uEq8PTdMIKXgfuCVDUSjxGrcwlzGi61k2g24wzO-u9YdN5Xqx0eFqooE0hhiifTsAsXPNJhXTmLinr4qt25bRfvVs1UpYNk6hv1RQ3afrg7UZavr-Osjh5amQ6Qi_q6kKTQWorB9Cgoj_UTIA8ojkK-6y7D8uzY-YtLzomuNvD8mELCeZC8ZdPbbibzC2Kj6Rw
。アクセストークン:null
localstorageを使用する前にINTERCEPTORSを初期化または作成すると疑いがあります。そのような場合、回避策はありません、誰も他のソリューションを提案できますか?
お手数をおかけします。あなたのコンポーネントの内部