質問/要件:
- ログイン後、最後にアクセスしたページに戻る
- 前のページが別のウェブサイトの場合は、パーソナルセンターに戻ります(カスタマイズ)
解決策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));
},
- データで定義
fromRouteName
data() {
return {
fromRouteName: null,
};
},
- ログインリクエストが成功したら、ジャンプする前に判断してください
if (this.fromRouteName) {
// 存在该数据,说明上一页是本网站页面,执行返回到上一页
this.$router.back();
} else {
// 不存在该数据, 说明上一页不是本网站,执行跳转到个人中心或主页
this.$router.push({
path: `personal/${
res.data.data.user.id}` });
}