Fork me on GitHub

vue-router 实现验证登录

最近改版的项目上有一个需求,如果用户没有登录,则不能跳转到除登录页外的其他页面

刚开始王二打算用 vue-router 的全局前置守卫来判断是否允许用户跳转,如下:

1
2
3
4
5
const router = new VueRouter({ ... })

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

但用全局前置守卫需要进行很多判断,处理不好还很容易导致递归调用,王二调试了很长时间都没有处理好,很是苦恼。

后来王二试了试 vue-router 的全局后置守卫来进行跳转,处理起来还真他娘的简单,比全局前置守卫好用多了,那么就用它了,代码参考如下:

1
2
3
4
5
router.afterEach((to, from) => {    //如果未登录,则直接跳转到login页面
if(!store.state.isLogin){ //从vuex里读取登录状态
router.push({name: 'Login'})
}
})
-------------本文结束感谢您的阅读-------------