Vue-router 路由拦截

路由拦截

当某些页面需要权限访问时，可以使用路由拦截对用户权限进行判断。

实现

在自定义路由时添加自定义字段 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请求拦截及响应拦截配合使用