Vue.js POST请求传入空Bearer Token触发401状态码错误排查求助

嘿，我一眼就发现你遇到401错误的核心原因了，主要是axios POST请求的参数结构写错了，再加上Vuex里的令牌值可能本身就是null，咱们一步步来解决：

1. Axios POST参数的错误用法 #

你现在把headers放在了axios.post的第二个参数位置，但实际上axios.post的参数格式是：

axios.post(url[, data[, config]])

第二个参数是请求体（data），第三个参数才是配置项（包含headers）。你当前的写法等于把headers当成请求体数据发给了后端，所以后端在params[:headers]里拿到了这个值，而实际的HTTP请求头里根本没带上Authorization令牌，这直接导致后端认证失败返回401。

2. 修正后的请求代码 #

把headers移到第三个参数的config对象里，同时先检查jwtToken是否为null，避免发送无效的Bearer null请求：

const fetchAllProductsRequest = (self) => {
  const jwtToken = self.$store.state.idToken;
  
  // 先校验令牌是否存在
  if (!jwtToken) {
    return Promise.reject(new Error('JWT令牌缺失，请重新登录'));
  }
  
  return axios
    .post(`/api/v1/imports/products/fetch_all`,
      // 第二个参数是请求体，无数据时传空对象即可
      {},
      {
        headers: {
          Authorization: `Bearer ${jwtToken}`,
          'Content-Type': 'application/json',
          'Accept': 'application/json'
        }
      })
    .then(response => response.data)
};

3. 排查Vuex中idToken为null的问题 #

从后端调试信息Authorization"=>"Bearer null能看出，self.$store.state.idToken的值是null，你需要确认：

• 用户登录后，是否正确将JWT令牌存入了Vuex的state中？
• 页面刷新时，有没有从localStorage/sessionStorage中恢复令牌到Vuex？（Vuex状态在页面刷新后会丢失）

4. 可选优化：全局Axios拦截器 #

为了避免每个请求都手动写headers，你可以配置axios全局拦截器，自动给所有请求带上Authorization令牌：

// 在项目的axios初始化文件中
import axios from 'axios';
import store from '../store'; // 引入你的Vuex store

axios.interceptors.request.use(config => {
  const jwtToken = store.state.idToken;
  if (jwtToken) {
    config.headers.Authorization = `Bearer ${jwtToken}`;
  }
  config.headers['Content-Type'] = 'application/json';
  config.headers['Accept'] = 'application/json';
  return config;
});

之后你的请求代码就能大幅简化，不用每次手动设置headers了。

另外提个小细节：你的syncAll方法里this.$store.commit('setSyncingProductsInProgress', value)中的value没有定义，建议改成true或者对应的状态值哦。

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