0

Ich verwende Azure B2C-Authentifizierung. Bei erfolgreicher Umleitung wird das Zugriffstoken in der localStorage des Browsers gespeichert, und bei nachfolgenden API-Aufrufen soll die folgende http-Interzeptorklasse das Authentifizierungs-Token an alle ausgehenden Anforderungen anhängen. Problem ist, dass localStorage.getItem() null zurückgibt, wenn versucht wird, das Authentifizierungs-Token von localStorage zu lesen. Hier ist der Code,Angular 4 benutzerdefinierte http Interceptor. localStorage.getItem() gibt null zurück

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); 
} 

Console protokolliert
Token gefunden:
eyJ0eXAiOiJKV1QiLCJhbGciOiJSUzI1NiIsImtpZCI6Ilg1ZVhrNHh5b2pORnVtMWtsMll0djhkbE5QNC1jNTdkTzZRR1RWQndhTmsifQ.eyJpc3MiOiJodHRwczovL2xvZ2luLm1pY3Jvc29mdG9ubGluZS5jb20vYmY5Njg3YWYtOTliMy00YzU3LWI2YjAtOWE5OGIzNTRhOWQyL3YyLjAvIiwiZXhwIjoxNTA0MTMxNzM3LCJuYmYiOjE1MDQxMjgxMzcsImF1ZCI6IjI4ZGM0NjZkLWRhZGUtNDNkMy04ZjBhLTJkYmNlNTQxYmIxMyIsIm9pZCI6IjcyMzljZWVjLTMzN2ItNDlmNS04YzViLTVkMzcwZGEwZmIxOCIsImdpdmVuX25hbWUiOiJaZWVzaGFuIiwiZmFtaWx5X25hbWUiOiJIYWlkZXIiLCJzdWIiOiJOb3Qgc3VwcG9ydGVkIGN1cnJlbnRseS4gVXNlIG9pZCBjbGFpbS4iLCJlbWFpbHMiOlsiWmVlc2hhbi5IYWlkZXJAY3JzcC5jaGlj YWdvYm9vdGguZWR1Il0sImF6cCI6IjI4ZGM0NjZkLWRhZGUtNDNkMy04ZjBhLTJkYmNlNTQxYmIxMyIsInZlciI6IjEuMCJ9.DUebFoHuzLXIbjMOmRrCRYswMB1g-7J6kVOaYyI3-b5AuaTjrcTtTsZkiGbloseaKqKtKoRtO72EkyQ2XvJ2lyhCBybpD4skeOcwQ2p_RBcO1dlFSoWIOkQK7WPN_f3tLxzuvKgrcPuR2LurB_n0uEq8PTdMIKXgfuCVDUSjxGrcwlzGi61k2g24wzO-u9YdN5Xqx0eFqooE0hhiifTsAsXPNJhXTmLinr4qt25bRfvVs1UpYNk6hv1RQ3afrg7UZavr-Osjh5amQ6Qi_q6kKTQWorB9Cgoj_UTIA8ojkK-6y7D8uzY-YtLzomuNvD8mELCeZC8ZdPbbibzC2Kj6Rw

Innerhalb http Abfangjäger. Zugriffstoken: null

Ich vermute, wenn INTERCEPTORS initialisiert oder erstellt wurde, bevor localStorage verfügbar ist. Wenn dies der Fall ist und es keine Problemumgehung gibt, kann jemand andere Lösungen vorschlagen?

Ihre Hilfe wird geschätzt!

Antwort

0

Inject Fenster in Ihrer Komponente

@Inject(WINDOW) private window: any 
Verwandte Themen