// 3. 响应拦截器,剥离无效数据,401拦截
instance.interceptors.response.use(
(res) => {
// 后台约定,响应成功,但是code不是10000,是业务逻辑失败
if (res.data?.code !== 10000) {
showToast(res.data?.message || '业务失败')
return Promise.reject(res.data)
}
// 业务逻辑成功,返回响应数据,作为axios成功的结果
return res.data
},
(err) => {
if (err.response.status === 401) {
// 删除用户信息
const store = useUserStore()
store.delUser()
// 跳转登录,带上接口失效所在页面的地址,登录完成后回跳使用
router.push({
path: '/login',
// router.currentRoute.value.fullPath获取当前路由
query: { return Url: router.currentRoute.value.fullPath }
})
}
return Promise.reject(err)
}
)
vue3登录401的时候,返回登录页,登录成功以后在返回之前的页面
最新推荐文章于 2024-08-14 11:32:15 发布
该代码段展示了如何使用axios的响应拦截器处理无效数据和401未授权错误。当接收到非10000状态码时,提示业务失败并拒绝Promise。若遇到401错误,清除用户信息,重定向到登录页面,并携带当前页面路径以便登录后返回。
摘要由CSDN通过智能技术生成