router.beforeEach 路由权限
时间: 2023-11-19 13:50:55 浏览: 83
使用vue-route 的 beforeEach 实现导航守卫(路由跳转前验证登录)功能
router.beforeEach 是 Vue Router 提供的全局前置守卫,用于在路由跳转前进行权限验证或其他操作。在该守卫中,可以通过 to 和 from 参数获取即将跳转的路由和当前路由信息,通过 next 方法控制路由跳转行为。
例如,可以在该守卫中判断用户是否登录,如果未登录则跳转到登录页面:
```
router.beforeEach((to, from, next) => {
const isLogin = localStorage.getItem('token')
if (to.meta.requireAuth) { // 判断该路由是否需要登录权限
if (isLogin) { // 已登录
next()
} else { // 未登录,跳转到登录页面
next({
path: '/login',
query: { redirect: to.fullPath } // 将跳转的路由path作为参数,登录成功后跳转到该路由
})
}
} else {
next()
}
})
```
阅读全文