Angular 12登出时触发HttpHeaders读取null的length属性TypeError求助

错误原因 #

• 登出操作执行后，你清空了localStorage同时将AuthService中的authToken设为null
• 此时仍然有逻辑（通常是未销毁的组件、路由守卫、或未取消的活跃订阅）在调用getProfile()方法
• getProfile()方法未校验authToken是否为空，直接将null作为第二个参数传入HttpHeaders.append()方法，Angular的HttpHeaders内部逻辑会读取header值的length属性，null不存在该属性，因此抛出对应报错。

修复方案 #

1. 修复AuthService中getProfile方法的逻辑，增加token非空判断 #

修改后的getProfile代码如下：

public getProfile(): Observable<ServerResponse> {
  this.loadToken();
  // 增加token非空判断
  if (!this.authToken) {
    // 未登录状态下可根据业务逻辑直接返回错误，或者做其他跳转处理
    return throwError(() => new Error('未登录，无法获取用户信息'));
  }
  const head = this.headers.append('Authorization', this.authToken);
  return this.http.get<ServerResponse>(this.baseUri + '/profile', { headers: head });
}

2. 补充登出后的接口调用拦截 #

• 给需要鉴权的页面增加路由守卫，未登录状态下直接拦截跳转登录页，避免对应页面初始化时调用需要鉴权的接口
• 如果有全局的Http拦截器，可在拦截器中统一判断：如果接口需要鉴权且当前无有效token，直接终止请求返回错误
• 登出操作执行时，取消所有活跃的API请求订阅、清空定时轮询的定时器，避免未完成的请求或定时任务继续调用接口触发报错

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