vue怎么判断用户退出页面_vue使用vue-router用户登录状态管理和权限管理

本文介绍了在Vue项目中使用vue-router进行用户登录状态管理和权限控制的方法,包括如何防止未登录用户访问受限页面,以及处理直接输入URL访问受限页面的情况。通过在router.beforeEach钩子函数中进行判断和跳转,确保了登录状态的有效管理。
摘要由CSDN通过智能技术生成

这是我做前端一来的第一篇文章,都不知道该怎么开始了。那就直接奔主题吧。先讲讲这个功能的实现场景吧,我们小组使用vue全家桶实现了一个单页面应用,最初就考虑对登录状态做限制。比如登录后不能后退到登录页面,退出到登录页面后,不能后退刚刚登录的页面。在main.js中:

new Vue({

store,

router

}).$mount('#app')

router.beforeEach((to, from, next) => {

window.scrollTo(0, 0)

console.log(1234)

if (!to.meta.requiresAuth) {

if (!store.state.collectItems.bAuth) {

next({

path: '/'

// query: { redirect: to.fullPath } })

} else {

next()

}

} else {

if (store.state.collectItems.bAuth && to.fullPath === '/') {

console.log()

next(false)

return

}

next()

}

})

对那些是登录才能访问的,那些是没有登录就可以直接访问的,都做限制。这些功能都是实现的没有问题的。但是发现了一个问题就是,但是发现了一个问题就是大家直接在浏览器的地址栏输入一个登录后才能访问的页面,虽然不能访问到页面,但是页面会卡在这里不动。原本设置的的路由跳转根本就没有起到作用。后来发现,因为是这块的路由根本就没有发挥作用的时候,页面就已经报错了。有一天突然和我们小组的妹子讨论的时候,突然提到能不能在页面渲染先设置一个路由呢,于是就在 new Vue实例前面加了一个router的判断:

router.beforeEach((to, from, next) => {

if (to.fullPath !== '/') {

next({

path: '/'

})

return

}

next()

})

瞬间之前的问题解决了。现在直接访问那些只有登录后才能访问的面,就直接跳转到了登录页面了。

整理后的代码:

router.beforeEach((to, from, next) => {

if (to.fullPath !== '/') {

next({

path: '/'

})

return

}

next()

})

new Vue({

store,

router

}).$mount('#app')

router.beforeEach((to, from, next) => {

window.scrollTo(0, 0)

console.log(1234)

if (!to.meta.requiresAuth) {

if (!store.state.collectItems.bAuth) {

next({

path: '/'

// query: { redirect: to.fullPath }

})

} else {

next()

}

} else {

if (store.state.collectItems.bAuth && to.fullPath === '/') {

console.log()

next(false)

return

}

next()

}

})

不对的地方还望大家指点,谢谢!

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值