Vue中如何通过beforeRouteEnter导航守卫在请求头中发送授权令牌？

核心问题1：axios实例不统一 #

你在路由守卫里修改的是api实例的默认请求头，但store的action里发起请求用的是全局axios实例，两者不是同一个对象，导致请求根本带不上你设置的Authorization头。

修复步骤： #

确保所有请求都使用同一个axios实例（也就是你定义的api），修改store里的action代码：

//store
import api from '@/path/to/your/api/instance'; // 导入你配置的api实例

actions: {
  getData({ commit }) {
    return api.get("http://localhost:7002/").then((res) => {
      commit("updatePosts", res.data.posts.rows);
    });
  },
}

核心问题2：onAuthStateChanged的异步时序问题 #

auth.onAuthStateChanged是异步回调，即便你把next()放在回调里，在页面刷新等场景下，回调触发可能存在微小延迟，导致HomeView的mounted钩子先执行，此时请求已经发送，Authorization头还没来得及设置。

修复步骤： #

改用同步方式获取用户状态（以Firebase Auth为例，多数Auth SDK都支持同步获取当前用户）：

{
  path: "/",
  name: "home",
  component: HomeView,
  async beforeRouteEnter(to, from, next) {
    const auth = getAuth();
    const user = auth.currentUser; // 同步获取当前用户
    if (user) {
      const accessToken = await user.getIdToken(); // 如需刷新令牌用此方法
      api.defaults.headers.common["Authorization"] = `Bearer ${accessToken}`; // 注意添加Bearer前缀（后端通常要求）
      console.log(api.defaults.headers.common["Authorization"]);
      next();
    } else {
      next({ name: "login" });
    }
  },
}

如果必须依赖onAuthStateChanged，要记得取消监听避免重复触发：

{
  path: "/",
  name: "home",
  component: HomeView,
  beforeRouteEnter(to, from, next) {
    const auth = getAuth();
    const unsubscribe = auth.onAuthStateChanged(async (user) => {
      unsubscribe(); // 取消监听
      if (user) {
        const accessToken = await user.getIdToken();
        api.defaults.headers.common["Authorization"] = `Bearer ${accessToken}`;
        console.log(api.defaults.headers.common["Authorization"]);
        next();
      } else {
        next({ name: "login" });
      }
    });
  },
}

额外检查点 #

• 确认后端要求的Authorization头格式是否为Bearer <token>，很多后端会校验前缀，缺失前缀会导致后端识别不到令牌。
• 在store的action里发起请求前打印请求头，确认是否正确携带：

actions: {
  getData({ commit }) {
    console.log('当前请求头:', api.defaults.headers.common);
    return api.get("http://localhost:7002/").then((res) => {
      commit("updatePosts", res.data.posts.rows);
    });
  },
}

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