路由拦截
当某些页面需要权限访问时,可以使用路由拦截对用户权限进行判断。
实现
在自定义路由时添加自定义字段 requireAuth
,用于判断用户是否已经登录,已经登录的用户可以跳转,否则将重定向到登录页面。
const router = new Router({
routes:[
{
path: '/',
name: 'Index',
compnent: Index,
meta: {
requireAuth: true
}
}
]
})
vue-router
提供了导航守卫来通过跳转或取消的方式守卫导航。
导航表示路由正在发生改变,使用
router.beforeEach()
注册全局守卫,在每次导航时判断用户是否已经登录。
router.forEach((to, from, next) => {
if (to.some(r => r.meta.requireAuth)){
if (store.state.token){
next()
} else {
next({
path:'/user/login',
query:{ redirect:to.fullPath }
})
}
} else {
next()
}
})
路由拦截经常会与http请求拦截及响应拦截配合使用