Angular报Observable<unknown>无法赋值为Observable<HttpEvent<any>>错误

报错原因 #

你遇到的Observable<unknown> 无法赋值给 Observable<HttpEvent<any>>类型错误，核心由以下几个问题导致：

• handleAuthErrors方法没有显式声明返回值类型，当Token正在刷新的分支未返回有效Observable时，TypeScript会自动推断该方法返回类型为unknown，和拦截器要求的返回类型不匹配
• 原代码调用addToken克隆请求后未将新请求对象赋值回变量，实际Token根本没有被附加到请求上
• 原逻辑缺失Token刷新中的并发请求处理，会导致重复触发刷新接口的问题
• 你贴的定位代码里把触发刷新的状态码误写为404，和原逻辑的403不一致，属于笔误

修复后完整代码 #

import { Injectable } from '@angular/core';
import {
  HttpInterceptor,
  HttpRequest,
  HttpHandler,
  HttpEvent,
  HttpErrorResponse
} from '@angular/common/http';
import { Observable, throwError, BehaviorSubject } from 'rxjs';
import { AuthService } from './shared/auth.service';
import { catchError, switchMap, filter, take } from 'rxjs/operators';
import { LoginResponse } from './login-response.payload';

@Injectable({
  providedIn: 'root'
})
export class TokenInterceptor implements HttpInterceptor {
  isTokenRefreshing = false;
  refreshTokenSubject: BehaviorSubject<any> = new BehaviorSubject(null);
  
  constructor(public authService: AuthService) { }

  intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
    // 修复：接收addToken返回的克隆后请求，否则Token不会被附加
    if (this.authService.getJwtToken()) {
      req = this.addToken(req, this.authService.getJwtToken());
    }

    return next.handle(req).pipe(
      catchError(error => {
        // 注意：触发刷新的状态码根据后端实际返回调整，通常为401/403，不要写成404
        if (error instanceof HttpErrorResponse && error.status === 403) {
          return this.handleAuthErrors(req, next);
        } else {
          return throwError(() => error);
        }
      })
    )
  }

  // 修复：显式声明返回值类型，解决类型推断为unknown的问题
  private handleAuthErrors(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
    if (!this.isTokenRefreshing) {
      this.isTokenRefreshing = true;
      this.refreshTokenSubject.next(null);

      return this.authService.refreshToken().pipe(
        switchMap((refreshTokenResponse: LoginResponse) => {
          this.isTokenRefreshing = false;
          this.refreshTokenSubject.next(refreshTokenResponse.authenticationToken);
          return next.handle(this.addToken(req, refreshTokenResponse.authenticationToken));
        }),
        // 新增：刷新Token失败的兜底逻辑，避免状态锁死
        catchError(err => {
          this.isTokenRefreshing = false;
          this.authService.logout();
          return throwError(() => err);
        })
      )
    } else {
      // 修复：Token正在刷新时，其他请求等待新Token下发后再重试
      return this.refreshTokenSubject.pipe(
        filter(token => token !== null),
        take(1),
        switchMap(jwtToken => {
          return next.handle(this.addToken(req, jwtToken));
        })
      )
    }
  }

  private addToken(req: HttpRequest<any>, jwtToken: string): HttpRequest<any> {
    return req.clone({
      headers: req.headers.set('Authorization', 'Bearer ' + jwtToken)
    });
  }
}

关键修改点说明 #

• 给handleAuthErrors显式声明返回类型为Observable<HttpEvent<any>>，从根源解决类型不匹配问题
• 修复intercept方法中addToken调用后未赋值的逻辑bug，确保Token正常注入请求头
• 补全并发请求等待逻辑：Token刷新过程中，其他触发403的请求不会重复调用刷新接口，而是等待新Token生成后自动重试
• 新增刷新失败兜底逻辑，避免isTokenRefreshing状态永久为true导致所有请求卡死
• 适配RxJS新版本要求，throwError改为传入错误工厂函数
• 不要使用方括号语法调用AuthService的公开方法，直接调用方法名即可（原代码写的this.authService['getJwtToken']()属于访问私有属性的hack写法，正式代码建议将对应方法声明为public后直接调用）

内容的提问来源于stack exchange，提问作者Rainysen