木灵鱼儿

木灵鱼儿

阅读：3065

最后更新：2020/10/17/ 2:18:46

axios 拦截器 登录超时或失效，删除token并跳转Login页面，并且记住跳转前path，登录成功后跳转回来

最近遇到如题的一个需求，因为很常用，所以我把它记录下来，方便以后使用。

流程

用户正常使用时，或者后台刷新了缓存，导致登录超时或者失效，前端api请求得到一个信息，比如code=10010，那么就表示用户登录信息失效了，前端页面就需要提示用户登录失效了，需要重新登录。

用户点击确认后，我们删除本地token，然后路由跳转。

跳转之前我们需要记录当前的路由，这样用户登录成功后可以跳转回来，体验极好。233...

流程示意：

登录失效 --> 前端api请求时得到code=10010
 --> 弹出提示窗口 --> 用户点击 重新登录 
 --> 清除token  --> 记录当前路由path并replace路由跳转至Login  
 --> 登录成功  --> 检测是否记录了路由path，记录了则跳path，无记录跳首页

拦截器

import store from "@/store";   //vuex
import router from "@/router";  //根路由对象

// response 拦截器
axios.interceptors.response.use(
  response => {
    if (response.status !== 200) {  //请求发生出错
      console.log("err",error);
      return Promise.reject(response);
    }else { //api请求成功
      const res = response.data;
      //后端规定1则是成功返回内容，其他值说明有错误，或者其他问题
      if (res.code !== 1) {
        //登录失效   
        if(res.code === 10010) {
          if (confirm("登录失效，请重新登录！")) {
            //清理vuex中的token
            store.commit("removeToken","");
            //路由跳转
            router.replace({ name: "Login", params: { wantedRoute: router.currentRoute.fullPath } });
          }
        }else { //其他错误
          console.log("err",error);
        }
        return Promise.reject(res)
      }else {
        //直接返回response下的data，这样可以减少一次解构，因为axios的请求结果，本身会封装一次，导致需要获取的内容层级更深了
        return response.data; 
      }
      
    }
  },
  error => {  //404或500这种错误时触发
    console.log("err",error)// for debug
    return Promise.reject(error);  //返回promise错误
  });

详解 router

我们import引入的是路由的根对象，也就是$router；所以我们如果要获取当前路由，需要使用currentRoute属性来获取。

path就是路径，当然你也可以获取name属性，看需要而已，省事用path。

登录成功跳转

这里就不写怎么进行登录了，我直接写登录成功后怎么跳转路由

在vue文件里面跳转

this.$router.replace(
  this.$route.params.wantedRoute || { name: "Home" }
);

在js文件里面跳转

这种情况一般是在vuex里面进行登录，然后跳转的。

import router from "@/router";  //根路由对象

//这里就不写详细的vuex配置了，反正方法是相同的
router.replace(router.currentRoute.params.wantedRoute || {
  name:"Home"
})
文章分类 vue 项目实战
文章标签 loginvuerouter路由axios拦截器token登录path
木灵鱼儿

木灵鱼儿

发布了 716 篇文章获得点赞 0获得阅读 3065

版权申明

本文系作者 @木灵鱼儿 原创发布在木灵鱼儿 - 有梦就能远航站点。未经许可，禁止转载。

one
two
three

关于作者

站点职位 博主
获得点赞 0
文章被阅读 3065

相关文章

利用发布订阅模式封装一个IntersectionObserver利用发布订阅模式封装一个IntersectionObserver
typecho 自定义分类和分类高亮处理typecho 自定义分类和分类高亮处理
ts封装一个localStorage和sessionStorage的类ts封装一个localStorage和sessionStorage的类
利用typescript实现原生css变量的主题切换功能类利用typescript实现原生css变量的主题切换功能类
typecho主题开发：基于webpack5的多页面打包项目typecho主题开发：基于webpack5的多页面打包项目