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实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
