Vue.js+Axios实现JWT Authorization请求头配置问题咨询

别担心，这是刚接触JWT认证时非常常见的问题，完全不需要道歉～我来帮你搞定怎么让Axios自动带上JWT请求头。

最推荐的方式：全局配置Axios请求拦截器 #

这种方法一劳永逸，所有请求都会自动带上Authorization头，不用每次手动写。你可以在项目的main.js里添加以下配置：

import axios from 'axios';
import Vue from 'vue';

// 先创建一个axios实例（如果还没的话）
const apiClient = axios.create({
  baseURL: '/' // 这里替换成你的后端API基础地址
});

// 添加请求拦截器，每次发送请求前自动带上token
apiClient.interceptors.request.use(
  (config) => {
    // 从localStorage取出之前存的token
    const userToken = localStorage.getItem('usertoken');
    if (userToken) {
      // 按照后端要求的格式设置Authorization头：Bearer + 空格 + token
      config.headers.Authorization = `Bearer ${userToken}`;
    }
    return config;
  },
  (error) => {
    // 处理请求错误，比如网络问题
    return Promise.reject(error);
  }
);

// 把这个配置好的axios实例挂载到Vue原型上，方便所有组件直接使用
Vue.prototype.$api = apiClient;

之后你在组件里请求安全路由的时候，直接用this.$api发送请求就行，它会自动带上token：

// 比如在某个组件里调用安全路由
this.$api.post('/secureroute')
  .then(res => {
    console.log(res.data.message); // 应该会输出"all ok"
  })
  .catch(err => {
    console.error('认证失败:', err);
  });

单个请求手动设置请求头（适合特殊场景） #

如果你只是想给某一个请求单独加token，也可以直接在请求里配置headers：

axios.post('/secureroute', 
  { /* 这里是请求的body数据，如果有的话 */ },
  {
    headers: {
      Authorization: `Bearer ${localStorage.getItem('usertoken')}`
    }
  }
)
.then(res => console.log(res))
.catch(err => console.log(err));

额外提醒：后端中间件的小问题 #

我注意到你提供的check-auth.js中间件里有个小bug：try块里已经调用了next()，但函数最后又多了一个next()，这会导致next()被执行两次，可能引发奇怪的错误。你需要删掉最后的那个next()，修改后的代码如下：

const jwt = require('jsonwebtoken');
module.exports = (req, res, next) => {
  try {
    const token = req.headers.authorization.split(" ")[1];
    console.log(token);
    const decoded = jwt.verify(token, process.env.SECRET_KEY);
    next(); // 这里调用一次就够了
  } catch (error) {
    return res.status(401).json({ message: 'Auth failed' })
  }
  // 删掉这里的next()！
}

这样调整后，你的前端请求应该就能顺利通过后端的认证啦～

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