@[toc]

全局路由前置守卫

介绍

目标：基于全局前置守卫，进行页面访问拦截处理
对于登陆后才能访问的页面进行拦截

配置

路由导航守卫 - 全局前置守卫

1.所有的路由一旦被匹配到，都会先经过全局前置守卫

2.只有全局前置守卫放行，才会真正解析渲染组件，才能看到页面内容

router.beforeEach((to, from, next) => {
   
  // 1. to   往哪里去， 到哪去的路由信息对象  
  // 2. from 从哪里来， 从哪来的路由信息对象
  // 3. next() 是否放行
  //    如果next()调用，就是放行
  //    next(路径) 拦截到某个路径页面
})

const authUrl = ['/pay', '/myorder']
router.beforeEach((to, from, next) => {
   
  const token = store.getters.token
  if (!authUrl.includes(to.path)) {
   
    next()
    return
  }

  if (token) {
   
    next()
  } else {
   
    next('/login')
  }
})