三种方法实现登录返回上一页,对上一页进行判断,如果不是本网站页面,就跳转到个人中心或网站主页,如果上一页是本网站页面就跳转回到上一页

问题/需求:

1. 登录后返回到上一次的访问页面
2. 如果上个页面是其他网站,返回个人中心(自己定)

解决方案一:

思路: 响应拦截器配合本地存储,先将网站的域名或基地址存到本地,登录成功后从本地取出该值进行判断,匹配则返回上一页,否则跳转到个人中心或网站主页(自己定)

代码实现:

响应拦截器: localStorage.setItem("baseURL", "http://127.0.0.1:8080")

// 添加响应拦截器
axios.interceptors.response.use(function (response) {
  // 对响应数据做点什么
  if (response.data.message === '用户信息验证失败') {
    // this.$router.push({name:'Login'})
    localStorage.setItem("baseURL", "http://127.0.0.1:8080")
    window.location.href = '#/login'
  }
  return response;
}, function (error) {
  // 对响应错误做点什么
  return Promise.reject(error);
})

登录页:

const baseURL = localStorage.getItem("baseURL");
if (baseURL === "http://127.0.0.1:8080") {
  // 匹配基地址成功,移除本地存储的基地址, 跳转到上一页
  localStorage.removeItem("baseURL");
  this.$router.go(-1);
} else {
  // 匹配失败,跳转到 个人中心页
  this.$router.push({ path: `personal/${res.data.data.user.id}` });
}

补充: 解决用户从本网站跳转到登陆页,却不登录,下次又重其他网站直接导航栏输入地址跳转时的bug.
beforeunload: 窗口关闭或者重新刷新都会触发这个事件

mounted() {
    window.addEventListener("beforeunload", () =>
      localStorage.removeItem("baseURL")
    );
  },

解决方案二:

思路:使用 beforeRouteEnter 导航守卫,将 from:导航正要离开的路由的参数,通过next((vm) => (vm.fromRouteName = from.name)) 将一个值挂载到组件实例fromRouteName属性上,登录成功跳转前判断 fromRouteName 的值是否存在, 1.存在:即说明上一个页面是本网站的页面,可以返回上一页. 2.不存在:说明上一个不是本网站的页面,要跳转到个人中心或网站主页

代码实现:

1.注意点:beforeRouteEnter是跟el,data同级的,其余参数说明看注释,代码就一句

beforeRouteEnter(to, from, next) {
    console.log("to", to);  // 即将要进入的目标 路由对象
    console.log("from", from); // 当前导航正要离开的路由
    console.log("next", next);  // next: Function,next不同用法不同效果,
    // 1.next()进行管道中的下个钩子
    // 2.next(false)中断当前导
    // 3.next('/') 或者 next({ path: '/' })中断本次导航,调到定义的其他导航
    // 4.next(error)导航会被终止且该错误会被传递给 router.onError() 注册过的回调
    
    // 在渲染该组件的对应路由被 confirm 前调用
    // 不！能！获取组件实例 `this`
    // 因为当守卫执行前，组件实例还没被创建
    // 
    next((vm) => (vm.fromRouteName = from.name));
  },

2. 在data中定义 fromRouteName

data() {
    return {
      fromRouteName: null,
    };
  },

3. 在登录请求成功后,跳转前判断

if (this.fromRouteName) {
// 存在该数据,说明上一页是本网站页面,执行返回到上一页
   this.$router.back(); 
} else {
// 不存在该数据, 说明上一页不是本网站,执行跳转到个人中心或主页
  this.$router.push({ path: `personal/${res.data.data.user.id}` });
}

解决方案三:

思路: 响应拦截器,拦截状态码401或403后,通过url参数传递当前路由地址给登陆页,登录页在登录成功后,跳转前获取下url参数做个判断!(淘宝,京东都是这种思路实现!)

代码实现

1. 拦截器里跳转传url参数:

axios.interceptors.response.use(function (response) {
  // 对响应数据做点什么
  if (response.data.statusCode == 401 || response.data.statusCode == 403) {
    Toast.fail(response.data.message)
    window.location.href = '#/login?returnurl=' + window.location.hash.substr(1)
  }
  return response;
}, function (error) {
  // 对响应错误做点什么
  return Promise.reject(error);
});

2. 登录成功跳转前判断

let url = decodeURIComponent(window.location.hash.split('=')[1])
// 跳转到合适的页面
if (url && url != 'undefined') {
  this.$router.push({ path: url })
} else {
  this.$router.push({ path: `/personal/${res.data.data.user.id}` })
}

结语: 3种方法都能实现需求,基本思想都是登录前做判断需要一个值