Vue3正确传递Token防止401错误

学习文章要努力，但是不要急！今天的这篇文章《Vue3 正确传递 Bearer Token 避免 401 错误》将会介绍到等等知识点，如果你想深入学习文章，可以关注我！我会持续更新相关文章的，希望对大家都能有所帮助！

Vue3 应用中调用登录接口后虽已将 Token 存入 localStorage，但后续 API 请求仍返回 401，根本原因在于 axios 并未自动读取并携带该 Token —— 必须显式在请求头中设置 `Authorization: Bearer `。

上述代码看似逻辑连贯：登录成功 → 保存 token → 获取用户数据 → 跳转首页。但问题出在 axios.get('user/userdata') 这一行——它默认不读取 localStorage 中的 token，也不会自动添加 Authorization 请求头，因此后端因缺少有效认证凭据而返回 401 Unauthorized。

✅ 正确做法是：在每次需要鉴权的请求中，手动注入 token 头。修改后的关键代码如下：

const response = await axios.post('user/login', {
  email: this.email,
  password: this.password
}).then(async (response) => {
  console.log('Login success:', response.data);

  // ✅ 正确保存 token
  localStorage.setItem('token', response.data.token);

  // ✅ 关键修复：显式传入 Authorization 头
  const userdata = await axios.get('user/userdata', {
    headers: {
      Authorization: `Bearer ${localStorage.getItem('token')}`
    }
  });

  this.$store.dispatch('user', userdata.data.userDataDTO);
  this.$router.push('/home');
}).catch(err => {
  console.error('Login request failed:', err.response?.data || err.message);
  this.failedToLogin = true;
});

⚠️ 注意事项：

• 不要依赖“先存后用”的时序假定：localStorage.setItem() 是同步操作，但 axios 请求本身不感知存储状态，必须主动传参；
• 避免重复获取 token：localStorage.getItem('token') 在此处是安全且必要的，无需额外判断（若为空，后端自然返回 401，便于统一错误处理）；
• 更优实践：建议将 token 注入逻辑全局化，例如通过 axios 拦截器统一设置请求头，避免每个请求都手动写：

// main.js 或 api/utils.js 中配置
axios.interceptors.request.use(config => {
  const token = localStorage.getItem('token');
  if (token) {
    config.headers.Authorization = `Bearer ${token}`;
  }
  return config;
});

这样，所有后续 axios.get()、axios.post() 等请求都会自动携带 token，大幅提升可维护性与健壮性。

? 补充说明：你提到“刷新页面后能自动登录”，正是因为初始化时（如路由守卫或 store 模块）显式读取了 localStorage 并设置了请求头（或已触发拦截器），印证了问题本质不是 token 无效，而是缺失主动授权声明。始终牢记：前端存储 ≠ 自动认证——安全机制要求每次请求都明确声明身份。

终于介绍完啦！小伙伴们，这篇关于《Vue3正确传递Token防止401错误》的介绍应该让你收获多多了吧！欢迎大家收藏或分享给更多需要学习的朋友吧~golang学习网公众号也会发布文章相关知识，快来关注吧！