全局前置守卫

路由导航在离开当前路由之后，进入新的路由之前，会触发前置守卫。

使用 router.beforeEach 方法创建一个前置守卫。

// router/index.js
// callback会在导航之前执行
// to 记录将要导航到的路由地址
// form 记录导航之前的路由地址
// next 是一个可选参数，用来是否继续执行后续流程
router.beforeEach((to, from, next) => {
	
  // 返回false，则中断导航
  // return false
  
  // 返回路由地址，则导航到该地址
  // 可以是path字符串
  // if(!token && to.name !== 'Login') return '/login'
  // 也可以是个对象
  // if(!token && to.name !== 'Login') return { name: 'Login' }
})

全局解析守卫

跟前置守卫类似，除了触发的位置不同，其他基本一致。

解析守卫触发的位置在导航确认之前，同时在所有组件内守卫和异步路由组件被解析之后。

使用 router.beforeResolve 创建一个解析守卫，用来获取数据或者执行其他操作。

// router/index.js
// callback 会在导航被确认之前，所有组件内守卫和异步路由组件被解析之后执行
// to 记录将要导航到的路由地址
// form 记录导航之前的路由地址
// next 是一个可选参数，用来是否继续执行后续流程
router.beforeResolve(async (to, from, next) => {
	// 请求用户的某些数据
  if(to.meta.attr) await doSomething()
  // 一些其他操作...
})

全局后置钩子

跟前置导航守卫不同的是，后置钩子不具有 next 方法，同时也不会改变导航本身。

我们可以利用它来实现分析页面、更改页面标题等的一些辅助性的工作。

如果在导航过程中，出现了任何问题，导致导航故障，这个也可以在后置钩子中有所体现，从而帮助我们分析、解决问题。

使用 router.afterEach 创建一个后置钩子。

// router/index.js
// callback 会在导航被确认，dom解析之前执行
// to 记录将要导航到的路由地址
// form 记录导航之前的路由地址
// failure 是否导航故障 navigation failures
router.afterEach((to, from, failure) => {
	// 做一些操作...
  if(!failure) doSomething(failure)
})

利用全局前置守卫拦截登录、进度条加载

// router/index.js
// 路由导航白名单，用来存放不用鉴权的路由
const whiteList = ['Error404', 'Error500']

// 全局前置守卫
router.beforeEach((to, from, next) => {
	// 进度条开始加载
  NProgress.start()
  
  // 判断用户是否登录
  const store = useUsersStore()
  const isLogin = store.isLogin
  // 如果用户未登录，直接跳转登录
  if(!isLogin) {
  	next({ name: 'Login', replace: true })
  } 
  // 如果用户已登录
  else {
    // 如果跳转的是登录界面，则直接重定向到首页
    if(to.name === 'Login') {
      next({name: 'Home'})
    } else {
    	next()
    }
  }
})

// 全局后置钩子
router.afterEach((to, from, failure) =>{
  // 加载完成关闭进度条
  setTimeout(() => {
  	NProgress.done()
  }, 300)
})