vue需要登录、不需要登录访问的页面,都在登录后回到之前的页面
出现场景:最近在处理一个vue相关的阅读项目。有些页面(如首页)不需要登录可以查看,有些页面(书籍阅读页面)需要登录才能查看,但是,都想在登录之后返回到之前的页面。
因为我这边需要登录的页面较多,不需要登录的页面较少,所以在router.js中的meta如下处理(即通过noNeedLogin控制):
//首页
{
path: 'home',
name: 'home',
component: _import('Home'),
meta: { noNeedLogin: true },
},
相关的路由守卫这样处理:
router.beforeEach((to, from, next) => {
if (!to.meta.noNeedLogin) { // 需要登录的页面处理
if (window.localStorage.getItem('isLogin')) {
next();
} else {
next({ path: '/form/userLogin', query: { redirect: to.fullPath } });
}
} else { // 不需要登录的页面处理
next();
}
});
但是上边的代码对不需要登录就可访问的页面没有用,就想着在else里面通过判断to.path==='/form/userLogin'来解决这个问题。最后导致页面死循环了,最后在登录页面使用了守卫解决。方案如下:
<script>
let redirectUrl; // 定义一个路由变量
export default {
...
}
</script>
然后在beforeRouteEnter中进行处理:
<script>
let redirectUrl;
export default {
beforeRouteEnter(to, from, next) {
redirectUrl = from.fullPath;
next(); // 这个不写的话无法显示登录页面
}
}
</script>
在登录请求完成之后跳转到上个页面:
<script>
let redirectUrl;
export default {
beforeRouteEnter(to, from, next) {
if (to.query && to.query.redirect) {
redirectUrl = to.query.redirect
} else {
redirectUrl = from.fullPath
}
next(); // 这个不写的话无法显示login页面
},
methods:{
login() {
...
this.$router.push(redirectUrl);
}
}
}
</script>
但是此时有些页面在登录后是不需要跳回的,而是应该跳到首页的,比如从注册页面到登录页,登录之后不是回到注册页,而是跳转到首页,所以需要添加处理,用一个白名单:
<script>
let redirectUrl;
// 不重定向白名单,比如从注册跳转到登录,登录之后应该到首页而不是回到注册页
const whiteList = ['/form/userLogin', '/form/userRegister', '/form/resetPassword']
export default {
beforeRouteEnter(to, from, next) {
if (to.query && to.query.redirect) {
redirectUrl = to.query.redirect
} else {
redirectUrl = from.fullPath
}
next(); // 这个不写的话无法显示login页面
},
methods:{
login() {
...
let url = whiteList.indexOf(redirectUrl) === -1 ? redirectUrl : '/';
this.$router.push(url);
}
}
}
</script>