Angular 4个自定义http拦截器。 localStorage.getItem() returns 空

Question

我正在使用 Azure B2C 身份验证。成功重定向后，访问令牌将存储在浏览器的 localStorage 中，对于后续的 API 调用，http 拦截器 class 应该将授权令牌附加到所有出站请求。问题是 localStorage.getItem() returns 尝试从 localStorage 读取身份验证令牌时为 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);
 }

控制台日志

Token found:  
  eyJ0eXAiOiJKV1QiLCJhbGciOiJSUzI1NiIsImtpZCI6Ilg1ZVhrNHh5b2pORnVtMWtsMll0djhkbE5QNC1jNTdkTzZRR1RWQndhTmsifQ.eyJpc3MiOiJodHRwczovL2xvZ2luLm1pY3Jvc29mdG9ubGluZS5jb20vYmY5Njg3YWYtOTliMy00YzU3LWI2YjAtOWE5OGIzNTRhOWQyL3YyLjAvIiwiZXhwIjoxNTA0MTMxNzM3LCJuYmYiOjE1MDQxMjgxMzcsImF1ZCI6IjI4ZGM0NjZkLWRhZGUtNDNkMy04ZjBhLTJkYmNlNTQxYmIxMyIsIm9pZCI6IjcyMzljZWVjLTMzN2ItNDlmNS04YzViLTVkMzcwZGEwZmIxOCIsImdpdmVuX25hbWUiOiJaZWVzaGFuIiwiZmFtaWx5X25hbWUiOiJIYWlkZXIiLCJzdWIiOiJOb3Qgc3VwcG9ydGVkIGN1cnJlbnRseS4gVXNlIG9pZCBjbGFpbS4iLCJlbWFpbHMiOlsiWmVlc2hhbi5IYWlkZXJAY3JzcC5jaGljYWdvYm9vdGguZWR1Il0sImF6cCI6IjI4ZGM0NjZkLWRhZGUtNDNkMy04ZjBhLTJkYmNlNTQxYmIxMyIsInZlciI6IjEuMCJ9.DUebFoHuzLXIbjMOmRrCRYswMB1g-7J6kVOaYyI3-b5AuaTjrcTtTsZkiGbloseaKqKtKoRtO72EkyQ2XvJ2lyhCBybpD4skeOcwQ2p_RBcO1dlFSoWIOkQK7WPN_f3tLxzuvKgrcPuR2LurB_n0uEq8PTdMIKXgfuCVDUSjxGrcwlzGi61k2g24wzO-u9YdN5Xqx0eFqooE0hhiifTsAsXPNJhXTmLinr4qt25bRfvVs1UpYNk6hv1RQ3afrg7UZavr-Osjh5amQ6Qi_q6kKTQWorB9Cgoj_UTIA8ojkK-6y7D8uzY-YtLzomuNvD8mELCeZC8ZdPbbibzC2Kj6Rw

HTTP 拦截器内部。访问令牌：null

我怀疑是否在 localStorage 可用之前初始化或创建了 INTERCEPTORS。如果是这种情况并且没有解决方法，有人可以建议其他解决方案吗？

我们将不胜感激！

Answer 1

在您的组件中注入 window

@Inject(WINDOW) private window: any

Angular 4个自定义http拦截器。 localStorage.getItem() returns 空

Angular 4 custom http interceptor. localStorage.getItem() returns null

html

local-storage

angular-http-interceptors

typescript2.0

angular