Angular(v5)从Local Storage取JWT访问受保护路由报500错误求解

老哥，我来帮你捋捋这个问题——你已经把token带到请求头里了还报500，大概率是前端请求头的格式或者拦截器配置有小问题，咱先从最省事儿、改动最少的地方入手排查：

• 检查请求头的token格式是否符合后端要求
  很多后端服务要求JWT必须带Bearer 前缀（注意后面有个空格），比如正确的请求头应该是 x-access-token: Bearer yourActualToken，而不是直接传yourActualToken。你可以先在Postman里分别测试两种格式，看哪种能正常返回。如果是这个问题，只需要在前端获取token后加个前缀就行：

  const storedToken = localStorage.getItem('accessJWT');
  const authToken = storedToken ? `Bearer ${storedToken}` : '';
  

  然后把authToken放到请求头的x-access-token字段中即可，改动非常小。

• 确认全局请求拦截器是否正确配置
  你已经在app.module.ts里导入了HttpClientModule，如果是想给所有请求自动带上token，得确保拦截器服务已经正确注册到模块里。比如你有没有创建类似AuthInterceptor的服务，然后在providers数组里配置：

  providers: [
    // 其他服务...
    {
      provide: HTTP_INTERCEPTORS,
      useClass: AuthInterceptor,
      multi: true // 关键：允许多个拦截器
    }
  ]
  

  如果之前没配置拦截器，或者配置漏了multi: true，那受保护路由的请求可能没正确带上token——补全这个配置或者给目标请求手动添加请求头就能解决，改动量极小。

• 快速验证token本身的有效性
  咱可以直接在浏览器控制台解码token看看：执行atob(yourToken.split('.')[1])就能拿到payload内容，检查token是否过期（看exp字段对应的时间戳），或者payload里的用户信息、权限字段是否符合后端的验证要求。如果是token过期，重新登录获取新token就行，不用改代码；如果是字段不匹配，跟后端确认后调整前端存储/传递的逻辑即可。

• 排除服务器端临时错误
  500毕竟是服务器内部错误，如果以上前端调整都试过还是不行，那大概率是后端验证token时的逻辑bug（比如空指针、数据库连接异常）。这时候可以让后端同事查一下服务器日志，或者用Postman模拟完全相同的请求（带正确token），如果Postman也报500，那前端不需要调整，只需要后端修复即可。

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