带有成员变量的HttpInterceptor

Question

我制作了一个拦截器服务，用于向每个 HTTP 请求添加身份验证标头。

服务

@Injectable ()
export class HttpInterceptorService implements HttpInterceptor
{
    token : string = undefined;
    
    setToken (token : string)
    {
        
        this.token = token;
        console.log ("interceptor set token", this.token);
    }
    
    intercept (req : HttpRequest <any>, next : HttpHandler) : Observable <HttpEvent <any>>
    {
        if (this.token != undefined)
        {
            console.log ("add token");
            let cloned : any = req.clone ({ headers: req.headers.append ("Authorization", this.token) });
            return next.handle (cloned);
        }
        else
        {
            console.log ("no token");
            return next.handle (req);
        }
    }
}

模块

...
providers: [
{
 provide: HTTP_INTERCEPTORS,
 useClass: HttpInterceptorService,
 multi: true
}
...

为了避免循环注入的问题，我设置了 setToken。但它不起作用。即使我设置了它，如果下次通过 HTTP 请求调用，令牌仍然是未定义的。

我需要做什么才能在 HTTP 调用之间保存 HttpInterseptorService 内的令牌？

Answer 1

我不会让拦截器有状态，而是创建一个服务来管理令牌并将其注册到依赖项注入器。这样，您就不需要将拦截器注入到不需要的地方。

这里的关键是确保管理令牌的服务在正确的范围内注册，可能在

root

中。在根目录中提供它可确保您拥有可供整个应用程序使用的单个服务实例，这意味着它公开的令牌将始终相同。

@Injectable({providedIn: 'root'}) //or provided in app.module, or main.ts
export class DemoService {
  private _token: string | null = null;

  setToken(val: string) {
    this._token = val;
  }

  getToken() {
    return this._token;
  }
}


@Injectable()
export class DemoInterceptor implements HttpInterceptor {
  constructor(private demoSvc: DemoService) {}

  intercept(req: HttpRequest<any>, next: HttpHandler) {
    //use the token from the service
    alert(`TOKEN: ${this.demoSvc.getToken()}`);

    return next.handle(req);
  }
}

这是一个工作示例，演示了使用服务获取某些令牌值的拦截器。