如何在 Vue3 中正确传递 Bearer Token 以避免 401 错误_网络技术

如何在 Vue3 中正确传递 Bearer Token 以避免 401 错误

发布时间 - 2026-01-25 00:00:00 点击率：次

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 无效，而是缺失主动授权声明。始终牢记：前端存储 ≠ 自动认证——安全机制要求每次请求都明确声明身份。

# vue # word # js # 前端 # vue3 # axios # 后端 # ai # ios # 路由 # Token # 接口 # 拦截器 # 跳转 # 首页 # 出在 # 正是因为 # 根本原因 # 这一行 # 虽已 # 若为

相关栏目：【网站优化151355 】【网络推广146373 】【网络技术251813 】【 AI营销90571 】

上一篇：如何在Symfony应用中集成OAuth2服务器？使用Lea

下一篇：如何解决PHP中的并行处理问题？使用amphp/parall

相关栏目网站优化
网络推广
网络技术
AI营销

最新文章 Sublime怎么一键压缩JS代码 Su sublime如何在搜索中使用正则表达式 Sublime如何设置透明窗口效果 Su mysql如何设计商品表结构_mysql css属性背景图不显示怎么办_通过检查路如何使用Golang实现排序_Golan 农历闰月是怎么回事_为合回归年加一月调整塑造《刺客信条》艾吉奥传奇的编剧离开育碧 1英里等于多少公里 1mile和km的换 css grid布局中行和列是如何定义的 PS批量旋转和翻转图片，快速校正图片方向 C# Swagger UI自定义方法 C OPPO手机九宫格和全键盘怎么切换_OP Go语言如何实现用户登录注册_Golan 1节飞行速度多少公里每小时 1节是多少公纸嫁衣8千子树第五章庙门怎么开启庙门 Laravel 多行数据编辑表单中实现逐明日之后如何提升钓鱼等级明日之后提升钓支付宝怎样查年度账单_支付宝年度账单查看 C# 多线程UI更新Dispatcher

上一篇：如何在Symfony应用中集成OAuth2服务器？使用Lea

下一篇：如何解决PHP中的并行处理问题？使用amphp/parall