Axios GET携带token仍被识别为非会员 如何实现不同身份返回不同响应？

问题根因 #

你当前代码的核心错误是Authorization请求头中Bearer标识和token值之间缺少半角空格，不符合JWT身份认证的标准请求头格式。后端的身份校验中间件无法正确拆分出有效token，因此会判定请求未携带身份凭证，识别为非会员发起的请求。

修改后的代码 #

getHeart(state, payload) {
  const {id} = payload
  // 提前判断token是否存在，避免携带无效的Authorization头
  const token = localStorage.getItem('user-token')
  const headers = token ? { Authorization: `Bearer ${token}` } : {}
  axios.get(`http://??.???.???.???:????/api/books/${id}/heart`, { headers })
  .then(res => {
    console.log(res)
  })
  .catch(err => {
    console.log(err)
  })
}

可选排查项 #

• 确认localStorage中存储的user-token值正常，未过期、无多余空格或特殊字符
• 打开浏览器开发者工具的「网络」面板，找到对应请求查看实际携带的请求头，确认Authorization字段格式为Bearer 你的token字符串
• 若后端有自定义的身份头规则（比如不需要Bearer前缀、使用其他自定义字段），可和后端开发人员确认规则后调整请求头
• 若为跨域请求，确认后端CORS配置已经放行Authorization请求头，避免浏览器自动拦截自定义头导致后端收不到

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