Vue3 axios响应拦截器处理接口返回401未登录跳转登录页

Vue3 axios响应拦截器处理接口返回401未登录跳转登录页

码农世界 2024-05-13 前端 70 次浏览 0个评论

问题:

  1. 在 asiox 使用 useRouter 实例化创建 router 路由对象,在 response 响应拦截器里为undefined访问不到
  2. 使用 window.location.href = '/login' 跳转登录页, 本地可以正常跳转,测试环境页面会显示 not found 404, 测试环境访问地址大概是这样 ip:8080/pm/#/login , 本地没有 /pm

解决方案:

  1. 在main.ts文件有引入 router 并 app.use(router) 注入路由
  2. 这个router在axios文件响应拦截里也可以访问到router对象
  3. 这样就可以愉快的用router.push('/login')

代码示例

router文件

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文件

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未登录跳转登录页》

百度分享代码,如果开启HTTPS请参考李洋个人博客
每一天,每一秒,你所做的决定都会改变你的人生!

发表评论

快捷回复:

评论列表 (暂无评论,70人围观)参与讨论

还没有评论,来说两句吧...

Top