在执行拦截器函数之前完全执行构造函数

Question

我是 Angular 的新手，所以我想使用 firebase 来存储用户令牌，这些令牌将在调用拦截器以修改请求标头时访问。

我在构造函数和HttpHandler函数中分别添加了firebase函数，

@Injectable()
export class AuthInterceptor implements HttpInterceptor {
    private token: any = null;

    constructor() {
        firebase.database().ref(`currentUserDetails/${localStorage.getItem('sn')}`).once('value', (snap) => {
            if(snap.exists()){
                this.token = snap.val().token;    
            }
        });
    }

    intercept(request: HttpRequest<any>, next: HttpHandler):  Observable<HttpEvent<any>> {
        if(this.token) {
            request = request.clone({
                setHeaders: {
                    Authorization: this.token
                }
            });
        }
        console.log(this.token) // this is null
        return next.handle(request)
    }

}

问题是intercept 函数在constructor 函数完全执行之前执行。所以，this.token 为空。

我尝试过使用回调函数，尝试过async await 函数，也尝试过堆栈溢出中给出的solution，但没有成功。

有什么办法可以解决这个问题吗？

Answer 1

由于您的 once() 调用的异步性质，它返回一个承诺，我会将它变成一个可观察的并像这样处理拦截内的数据流：

import { from } from 'rxjs';
import { mergeMap } from 'rxjs/operators';

@Injectable()
export class AuthInterceptor implements HttpInterceptor {
    private token: any = null;
    private token$: Observable<any>;

    constructor() {
        this.token$ = from(firebase.database().ref(`currentUserDetails/${localStorage.getItem('sn')}`).once('value', (snap) => {
            if (snap.exists()) {
                this.token = snap.val().token;
            }
        }));
    }

    intercept(request: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
        this.token$.mergeMap(
            token => {
                if (token) {
                    request = request.clone({
                        setHeaders: {
                            Authorization: this.token
                        }
                    });
                }
                return next.handle(request)
            }
        )
    }

}

来自https://medium.com/@danielcrisp/async-http-interceptors-with-angular-4-3-9e6e795da562的灵感