问题/需求:
- 登录后返回到上一次的访问页面
- 如果上个页面是其他网站,返回个人中心(自己定)
解决方案一:
思路: 响应拦截器配合本地存储
,先将网站的域名或基地址存到本地,登录成功后从本地取出该值进行判断,匹配则返回上一页,否则跳转到个人中心或网站主页(自己定)
代码实现:
响应拦截器: 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));
},
- 在data中定义
fromRouteName
data() {
return {
fromRouteName: null,
};
},
- 在登录请求成功后,跳转前判断
if (this.fromRouteName) {
// 存在该数据,说明上一页是本网站页面,执行返回到上一页
this.$router.back();
} else {
// 不存在该数据, 说明上一页不是本网站,执行跳转到个人中心或主页
this.$router.push({
path: `personal/${
res.data.data.user.id}` });
}