拦截器中未定义令牌

Question

我在使用 JWT 验证用户身份并允许访问我正在开发的网站的某些区域时遇到了问题。

确认用户存在于数据库中工作正常，我可以在后端创建令牌，没有任何问题，但是当我尝试在拦截器中使用令牌时，它不起作用。这是我的登录功能。

getToken() {
    // get token returns undefined
    return this.token;
}

    userLogin(email: string, password: string) {
    const authData: AuthData = { email: email, password: password };
    this.http.post<{ token: string }>('http://localhost:3000/api/auth/login', authData).subscribe((response) => {
        const token = response.token;
        this.token = token;
    });

令牌被声明为私有变量，这就是为什么我有在下面的拦截器中使用的 gettoken 函数。

import { HttpEvent, HttpHandler, HttpInterceptor, HttpRequest } from '@angular/common/http';
import { Injectable } from '@angular/core';
import { Observable } from 'rxjs';
import { UserAuthService } from './auth.service';

@Injectable()
export class AuthInterceptor implements HttpInterceptor {
    constructor(private authService: UserAuthService) {}

    intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
        console.log('auth-interceptor.ts intercept() Token = ', this.authService.getToken());
        const authToken = this.authService.getToken();
        const authRequest = req.clone({
        headers: req.headers.set('Authorization', authToken)
        });
        return next.handle(authRequest);
    }
}

任何有关这方面的帮助将不胜感激，谢谢。

Answer 1

您需要在模块中提供拦截器：

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

Answer 2

正如评论中提到的，您应该确保您的服务中有 @Injectable({providedIn: 'root'}) ，否则该服务可能不是单例，并且您将拥有该类的多个实例。这可以解释令牌丢失的原因。

看看发生了什么也是一个技巧，可以像这样更改代码：

  private _token: string;
  get token(): string {
    console.log('getting token: ', this._token);
    return this._token;
  }
  set token(token: string) {
    console.log('setting token: ', token);
    this._token = token;
  }

然后您可以简单地执行 this.token = token; 和 const authToken = this.authService.token;你应该看到日志。

还要按顺序在服务构造函数中添加一个 console.log() ，以便查看是否有同一服务的多个实例。