Vue项目登录成功后返回到原操作页面

4,350 阅读1分钟
  • 登录超时或者由于其它原因,造成必须重新登录的情况,相信大家都见过这种场景,比较偷懒的办法是登陆成功厚直接回到主页面,但其实我们有更好的解决办法。

    作为vue的标配,我们可以利用axios的全局拦截器做一些事情,在发出请求之后对res进行拦截:
    axios.interceptors.response.use(
      res => {
        //对响应数据做些事
        if (res.data.code === -1) {  // 这里根据自己接口返回状态进行判断是否需要登录
          router.push({
            path: '/login',
            query:{
              redirect: location.hostname  // 防止从外部进来登录
            }
          })
        }
        return res.data;
      },
      error => {
        let errorInfo = error.data.error ? error.data.error.message : error.data;
        return Promise.reject(errorInfo);
      }
    );
    
    登录成功之后,利用vue-router进行跳转:
    let hostName = this.$route.query.redirect;  // 获取域名
     if (hostName === this.$url()) {   // 判断如果域名是你项目域名,说明是从本网站内部跳转过来的,
          this.$router.go(-1);   // 登录成功后,返回上次进入的页面;
     } else {
         window.open(this.$url()+'/article/news','_self');  // 若不是网站内部跳转过来的,登陆成功后进入网站首页
     }