登陆后页面回跳功能实现

页面回跳

在文章详情页，如果没有登陆，则应该通过拦截器重定向到登陆页

但是有一个需求：登陆成功之后，仍然回到当前文章详情页

解决：

1.当重定向到登陆页的时候，将当前文章详情页的地址做为参数传递给登陆页

2.在登陆成功之后，根据之前传递的地址进行回跳

将当前文章详情页的地址做为参数传递给登陆页

// src/utils/request.js 添加响应拦截器 核心代码是第7行
axios.interceptors.response.use(function (response) {// 响应成功
  console.log('response--', response);
  // 看看这个操作后台是否会告诉我要先登陆
  if (response.data.message === "用户信息验证失败") {
    Toast.fail('未登陆，请先登陆')
    location.href = '#/login?redirectUrl=' + location.href
  }

  // 对响应数据做点什么
  return response;
}, function (error) { // 一定要报错了
  // 对响应错误做点什么
  return Promise.reject(error);
});

根据之前传递的地址进行回跳

// /src/views/login.vue
if (res.data.message === "登录成功") {
    // 在跳转之后，存储token到本地存储
    localStorage.setItem('heima_65_token', res.data.data.token)
    let redirectUrl = location.href.split('=')[1]
    if (redirectUrl) {
        // decodeURIComponent可以对地址进行解码
        location.href = decodeURIComponent(redirectUrl)
    } else {
        // 跳转到个人中心页
        this.$router.push({ path: `/personal/${res.data.data.user.id}` })
    }
    this.$toast.success('登陆成功')
} else {
    // 提示
    this.$toast.fail('登陆失败')
}

标签：功能,详情页,location,redirectUrl,页面,data,response,登陆
来源： https://blog.csdn.net/Donnien/article/details/118973540