Angular：ngOnInit无法加载数据，请求返回401错误求助

1. 确认AuthInterceptor是否正确生效并添加请求头 #

首先检查拦截器的注册和逻辑：

• 确保AuthInterceptor在app.module.ts的providers中正确配置：

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

• 在拦截器的intercept方法中加日志，验证令牌是否被正确添加到请求头：

  intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
    const token = this.tokenStorage.getToken();
    console.log('当前拦截的请求，携带令牌:', token);
    if (token) {
      // 重点：Bearer后面必须加空格，这是401的常见坑
      req = req.clone({
        setHeaders: { Authorization: `Bearer ${token}` }
      });
    }
    return next.handle(req);
  }
  

2. 用浏览器开发者工具验证请求头 #

打开F12的Network面板，找到对应GET请求，查看Request Headers：

• 如果没有Authorization字段，说明拦截器未生效，检查模块是否正确注册拦截器，避免懒加载模块重复覆盖配置。
• 如果有该字段，复制内容和Postman里的对比，确认格式完全一致（包括Bearer后的空格、令牌无多余字符）。

3. 验证TokenStorageService的令牌获取逻辑 #

• 确认getToken方法取的key和登录时存储的一致，比如：

  getToken(): string | null {
    return localStorage.getItem('auth-token'); // 确保key和登录时setItem的key相同
  }
  

• 在组件ngOnInit里提前打印令牌，确认请求发送前令牌存在：

  ngOnInit(): void {
    console.log('页面初始化时的令牌:', this.tokenStorage.getToken());
    this.loadUserData();
    this.loadPostData();
  }
  

4. 排查令牌时机与存储问题 #

• 如果是刷新页面后出现问题，确认令牌存在于localStorage而非sessionStorage（后者刷新会清空）。
• 检查登录流程，确保令牌在登录成功后立即存入存储，避免请求发送时令牌还未写入。

5. 检查服务端CORS配置 #

浏览器跨域请求会自动预检，确认服务端响应头包含：
Access-Control-Allow-Headers: Authorization
否则浏览器会过滤掉Authorization头，导致服务端收不到令牌返回401。

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