vue 需要登录、不需要登录访问的页面都在login后回到之前的页面
最近在一个前台项目,个人中心需要登录之后才能访问,关于我们页面不需要登录就能访问,都想在登录之后返回到之前的页面。个人中心这种需要登录权限的页面,在全局的路由守卫里面加入里,在路由的元信息meta里面加上meta: { requireAuth:true},然后router.beforeEach((to, from, next) => {// NProgress.start()// c...
·
最近在一个前台项目,个人中心需要登录之后才能访问,关于我们页面不需要登录就能访问,都想在登录之后返回到之前的页面。
个人中心这种需要登录权限的页面,在全局的路由守卫里面加入里,在路由的元信息meta里面加上meta: { requireAuth:true},
然后
router.beforeEach((to, from, next) => {
// NProgress.start()
// console.log(to.meta.requireAuth);
if (to.meta.requireAuth) { // 如果访问的页面必须要登录
if (getToken()) {
next(); /* */
} else {
next({
path: '/login',
query: { redirect: to.fullPath }
})
}
} else {
next();
}
})
但是这对不需要登录就可访问的页面没有用,就想着在else里面通过判断to.path==='login’来解决这个问题。。最后导致页面死循环了,经过大佬的指点后在login页面使用了守卫解决
- 先在login组件内定义一个变量:
<script>
let redirectUrl;
export default{
}
</script>
然后在beforeRouteEnter里拿到上个路由的路径:
<script>
let redirectUrl;
export default {
beforeRouteEnter(to, from, next) {
redirectUrl = from.fullPath;
next(); // 这个不写的话无法显示login页面
}
}
</script>
2.在登录请求完成之后跳转到上个页面
<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() {
setToken('admin');
this.$router.push(redirectUrl);
}
}
}
</script>
3.这其中又有些不需要登录的页面是不需要返回的,比如从注册跳转到登录页,登录完成之后应该回到首页而不是注册页,所以又增加了一个不需要返回的白名单,里面放入的是这些页面的路由路径。
<script>
let redirectUrl;
const whiteList = ['/login', '/register', '/retrieve-password/index', '/retrieve-password/next', '/retrieve-password/retrieved'] // 不重定向白名单
export default {
beforeRouteEnter(to, from, next) {
redirectUrl = from.fullPath;
next(); // 这个不写的话无法显示login页面
},
methods:{
login() {
setToken('admin');
let url = whiteList.indexOf(redirectUrl) === -1 ? redirectUrl : '/';
this.$router.push(url);
}
}
}
</script>
``
更多推荐
已为社区贡献2条内容
所有评论(0)