ログインして前のページに戻り、前のページを判断する方法は2つあります。このウェブサイトのページでない場合は、パーソナルセンターまたはウェブサイトのホームページにジャンプし、前のページがこのウェブサイトのページの場合は、前のページに戻ります。

質問/要件:

  1. ログイン後、最後にアクセスしたページに戻る
  2. 前のページが別のウェブサイトの場合は、パーソナルセンターに戻ります(カスタマイズ)

解決策1:

アイデア: 响应拦截器配合本地存储まず、ウェブサイトのドメイン名またはベースアドレスをローカルに保存します。ログインが成功したら、ローカルから値を取得して判断し、一致する場合は前のページに戻ります。一致しない場合は、パーソナルセンターまたはウェブサイトのホームページにジャンプします(ユーザーが決定します)。

コード:

応答インターセプター: 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}` });
}

補足:ユーザーがこのWebサイトからランディングページにジャンプしたが、ログインせず、次回は他のWebサイトのナビゲーションバーに直接アドレスを入力したときにバグを解決します
beforeunload。:このイベントはウィンドウを閉じるか更新したときにトリガーされます。

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

解決策2:

アイデアbeforeRouteEnterナビゲーションガード、from:导航正要离开的路由パラメーターの使用、次の((vm)=>( vm.fromRouteName = from.name))は、ログインが成功する前に、コンポーネントインスタンスのfromRouteName値を属性値にマウントします。fromRouteNameかどうかのジャンプ判定存在する、1。存在する:前のページがこのウェブサイトのページであることを意味します。前のページに戻ることができます。2。存在しない:前のページがこのウェブサイトではないことを意味します。パーソナルセンターまたはウェブサイトのホームページにジャンプします。

コード:

1.注:beforeRouteEnterはelおよびdataと同じレベルであり、残りのパラメーターはコメントで説明されており、コードは1文です。

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));
  },
  1. データで定義 fromRouteName
data() {
    
    
    return {
    
    
      fromRouteName: null,
    };
  },
  1. ログインリクエストが成功したら、ジャンプする前に判断してください
if (this.fromRouteName) {
    
    
// 存在该数据,说明上一页是本网站页面,执行返回到上一页
   this.$router.back(); 
} else {
    
    
// 不存在该数据, 说明上一页不是本网站,执行跳转到个人中心或主页
  this.$router.push({
    
     path: `personal/${
      
      res.data.data.user.id}` });
}

おすすめ

転載: blog.csdn.net/wangdekai007/article/details/109294324