Angular中JWT Token在Postman正常但前端调用/getuser返回401未授权

先理清楚核心矛盾：Postman能正常携带Token请求成功，但Angular前端不行，说明问题大概率出在前端请求没有正确携带Token，或者Token的传递/解析环节存在疏漏。下面一步步拆解排查：

1. 确认JWT拦截器是否在Angular中正确注册 #

你写了JwtHttpInterceptor，但如果没在AppModule的providers里配置生效，拦截器根本不会工作，请求自然不会带上Authorization头。检查你的AppModule代码：

import { HTTP_INTERCEPTORS } from '@angular/common/http';
import { JwtHttpInterceptor } from './auth'; // 注意路径要和你的文件匹配

@NgModule({
  providers: [
    {
      provide: HTTP_INTERCEPTORS,
      useClass: JwtHttpInterceptor,
      multi: true // 必须设为true，支持多个拦截器
    }
  ]
})
export class AppModule {}

如果没加这段配置，拦截器完全不会生效，这是最容易踩的坑。

2. 查看浏览器实际发送的请求头 #

打开浏览器开发者工具（F12），切换到Network标签，找到/getuser的请求，查看Request Headers里是否存在Authorization: Bearer xxxxxx这一行：

• 如果完全没有这个Header：要么拦截器没注册，要么getToken()函数没拿到有效Token。
• 如果有这个Header，但Token内容为空/格式错误：直接定位到Token获取或存储的问题。

3. 验证getToken()函数的正确性 #

你的getToken()逻辑是先查localStorage再查sessionStorage，但登录时的Token存储是否正确？可以在调用getProfile()前手动打印Token结果：

// 在仪表盘组件的请求代码前加一行调试
import { getToken } from './auth'; // 导入getToken函数

// ...
console.log('当前获取到的Token:', getToken());
this.userService.getProfile().subscribe(data => (this.profile = data));

如果打印结果是null，说明Token没有被正确存储：

• 检查login和register方法里的setToken(res.token)是否执行，比如在map回调里打印res，确认res.token确实存在。
• 检查tokenNotExpired()的判断逻辑，有没有出现Token刚生成就被误判为过期的情况（不过Postman能用的话，这个概率极低）。

4. 检查后端auth中间件的Token解析逻辑 #

Postman能正常请求说明后端核心逻辑没问题，但要确认auth中间件是否正确处理Bearer xxx格式的Token。比如中间件是否从Authorization头里正确提取Token：

// 示例：正确的Bearer Token解析逻辑
module.exports = (req, res, next) => {
  const authHeader = req.headers.authorization;
  // 检查Header是否存在且以Bearer开头
  if (!authHeader || !authHeader.startsWith('Bearer ')) {
    return res.status(401).json({ message: 'Unauthorized' });
  }
  // 提取Bearer后面的Token部分
  const token = authHeader.split(' ')[1];
  // 后续验证Token的逻辑...
};

如果你的auth中间件直接拿整个Authorization头去验证，没有去掉Bearer 前缀，就会导致验证失败返回401。

5. 快速绕开拦截器测试 #

如果以上排查都没问题，可以临时修改getProfile方法，手动添加Authorization头，跳过拦截器验证：

getProfile() {
  const token = getToken();
  return this.http.get<Profile>('http://localhost:3001/getuser', {
    headers: {
      'Authorization': `Bearer ${token}`
    }
  });
}

如果这样请求成功，说明拦截器的配置/逻辑有问题；如果还是401，那大概率是Token本身无效（但Postman能用的话这个可能性极低），或者后端有其他未注意到的校验逻辑。

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