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"
})
0

相关文章

微信收款码
微信收款码