浅理解导航守卫

106 阅读1分钟

导航守卫可以控制路由的访问权限

未使用导航守卫时在未登录的情况下访问后台主页,无法控制访问权限,用户可以直接访问后台主页。相反导航守卫在检测到未登录时会强制跳转到登录页

全局前置守卫

每次发生路由的导航跳转时,都会触发全局前置守卫。
调用路由实例对象的beforeEach方法可声明全局前置守卫

回调函数中三个形参

to是将要访问的路由的信息对象
from是将要离开路由的信息对象
next是一个函数,调用next()表示放行,允许这次路由导航

next函数的3种调用方式

当前用户拥有后台主页的访问权限,直接放行:next()
当前用户没有后台主页的访问权限,强制其跳转到登录页面:next('/login')
当前用户没有后台主页的访问权限,不允许跳转到后台主页:next(false)

//控制后台主页的访问权限
router.beforeEach(function(to,from,next){
  if(to.path==='/main'){
    const token=localStorage.getItem('token')
    if(token){
      next()
    }else{
      next('/login')
    }
  }else{
    next()
  }