路由导航守卫(路由拦截器)控制页面访问权限

项目开发中,经常会遇到很多页面必须登录以后携带token才可以进行访问,如果用户没有登录,直接访问某些页面是禁止的,这时候就要用到 路由导航守卫进行拦截,请看下面介绍,你会很容易明白:

to 将要访问的路径

form 代表从哪个路径跳转而来

next 是一个函数 表示放行

next() 放行 next(’/login)强制跳转

附上代码,如有需要可自行复制粘贴,哈哈

Vue.use(Router);

const router = new Router({
    routers: [
        {
            path: '/', redirect: '/login'
        },
        {
            path: '/login', component: 'login'
        },
        {
            path: '/home', component: 'home'
        },
    ]
})


//挂在路由导航守卫
router.beforeEach((to,from,next)=>{
    //to 将要访问的路径
    //form 代表从哪个路径跳转而来
    //next 是一个函数  表示放行
    //next()放行  next('/login)强制跳转

    // 如果用户访问的路径是登录页,则直接放行
    if (to.path==='/login') return next()
    //否则用户就没有访问登录页,那我们就需要先获取token
    通过token有木有值来判断,是否给用户进行强制跳转
    //获取token
    const tokenStr=window.sessionStorage.getItem('token')
    //如果tokenStr不存在,就强制跳转到登录页
    if (!tokenStr) return next('/login')
    // 如果没有return出去,证明tokenStr存在,直接放行
    next()
})

export default router