Angular调用用户列表API报401但Postman请求正常该如何排查

架构老林

2026-10-5

Angular接口401未授权问题修复方案

根因定位

1. 核心错误：JWT认证头格式不合法

你在memberService.ts中定义Authorization头时，Bearer关键词后缺少半角空格，错误的拼接格式导致服务器无法正确解析携带的token，直接返回401未授权。Postman中手动填写头时会自动补全空格，因此请求可以正常返回。

2. 隐藏问题：token缓存不更新

你将`htttpOptions`定义为服务顶层常量，会在服务初始化时一次性读取localStorage的用户信息，后续用户登录、token刷新后，该常量不会同步更新最新token，也会导致请求携带无效凭证。

修复代码

修改后的memberService.ts

import { HttpClient, HttpHeaders } from '@angular/common/http';
import { Injectable } from '@angular/core';

import { environment } from 'src/environments/environment';
import { Member } from '../_models/member';

@Injectable({
  providedIn: 'root'
})
export class MembersService {
  baseUrl = environment.apiUrl;

  constructor(private http: HttpClient) { }

  // 每次请求前实时获取最新token，避免缓存旧值
  private getAuthOptions() {
    const user = localStorage.getItem('user') ? JSON.parse(localStorage.getItem('user')) : null;
    if (!user?.token) return {};
    return {
      headers: new HttpHeaders({
        // 注意Bearer后补了半角空格
        Authorization: `Bearer ${user.token}`
      })
    };
  }

  getMembers() {
    return this.http.get<Member[]>(`${this.baseUrl}users`, this.getAuthOptions());
  }

  getMember(username: string) {
    return this.http.get<Member>(`${this.baseUrl}users/${username}`, this.getAuthOptions());
  }
}