路由前置导航守卫

路由值发生改变时会触发路由

路由前置守卫语法

router.beforeEach((to, from ,next) => {
  console.log(to);
  console.log(from);
  console.log(next);
})

  //路由跳转之前先执行这里,决定是否要跳转
  //参数1: 要跳转到的路由
  //参数2: 从哪里跳转的路由
  //参数3: 函数体中next()放行,让路由正常的跳转切换 next(false)留在原地不跳转路由, next(path路径)强制换成对应path路径跳转,强制修改到另一个路由路径上

// 路由前置导航守卫,路由值发生改变会触发

// 路由前置守卫, to 去到哪个页面,from从哪里来 next 放行
router.beforeEach((to, from, next) => {
  // console.log(to.push)
// 定义一个白名单列表, 里面有登录页,注册页,也可以写其他页面
  const whiteList = ['/login', '/Reg', '/404']
  // 如果访问的是有权限的页面,就不需要拦截,直接放行
  // includes数组方法,布尔值
  if (whiteList.includes(to.path)) {
    next()
    // 如果访问的是有权限的页面, 就判断是否有token,如果有,直接放行
  } else {
    if (localStorage.getItem('token')) {
      next()
    } else {
      // 没有token拦截到登录页面,让用户重新登录
      next({ path: '/login' })
    }
  }
})