问题:
- 在
asiox
使用useRouter
实例化创建router
路由对象,在response
响应拦截器里为undefined
访问不到 - 使用
window.location.href = '/login'
跳转登录页, 本地可以正常跳转,测试环境页面会显示 not found 404, 测试环境访问地址大概是这样ip:8080/pm/#/login
, 本地没有/pm
解决方案:
- 在
main.ts
文件有引入router
并app.use(router)
注入路由 - 这个
router
在axios
文件响应拦截里也可以访问到router
对象 - 这样就可以愉快的用
router.push('/login')
代码示例
router文件文章来源:https://www.toymoban.com/news/detail-812682.html
import service from '@/views/service'
import { createRouter, createWebHashHistory, createWebHistory } from 'vue-router'
const router = createRouter({
// history: createWebHistory(),
history: createWebHashHistory(),
routes: [
{
path: '/',
component: () => import('@/home/index.vue'),
},
{
path: '/login',
name: '/login',
component: () => import('@/views/login/index.vue'),
},
],
})
export default router
axios文件文章来源地址https://www.toymoban.com/news/detail-812682.html
import axios from 'axios'
import { ElMessage } from 'element-plus'
// 引入定义的 router 实例
import router from '../router'
const request: any = axios.create({
baseURL: '/api',
timeout: 600000,
})
function redirectLogin() {
router?.push('/login')
}
request.interceptors.response.use(
(response: any) => {
// 未登录回到登录页
if (response.data?.code === '401') {
return router?.push('/login')
}
if (response.data.code !== '200') {
ElMessage.error(response.data.msg)
return Promise.reject(response.data)
} else {
return response.data.data
}
},
(error: any) => {
return Promise.reject(error)
}
)
export default request
到了这里,关于Vue3 axios响应拦截器处理接口返回401未登录跳转登录页的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!