路由导航守卫（进阶）

导航

• 表示路由正在发生改变，进行路由跳转

守卫

• 你把它当成“紫禁城护卫”

1、全局守卫

• 举例子：紫禁城【皇帝、太后、妃子】，紫禁城大门守卫全要排查
• 你的项目当中，只要发生路由变化，守卫就能监听到
• 1、全局前置守卫：你可以使用router.beforeEach 注册一个全局前置守卫

const router = new VueRouter({.....})
router.beforeEach((ro, from, next) => {
	//
})

说明

上面三个参数的说明
- ①  to：可以获取到你要跳转到哪一个路由信息
- ② from: 可以获取到你从哪个路由来的信息
- ③ next：是一个放行的函数 
（有三种形式：1、 next() 放行  2、next(path) 【 next('/login') 】放行到指定的路由 3、next(false) ）

**实例**（商品汇项目）
 - 1、用户在进行登录成功以后，不能够在跳转到登录页面【通过是否有token来做出相应的限制】
 - 2、根据token来进行判断，如果有token，说明已经登录了，然后先判断路径是不是自己想要的，
 - 3、如果去别的页面的话：去的不是login 【home|search|detail|shopcart】访问的是别的页面
 		根据用户名是否有来进行判断，如果用户名有的话，放行，否则用户名没有我们就需要派发actions，让仓库存储用户信息，然后进行跳转， 获取用户信息的操作就是 store.dispatch('getUserInfo')【派发actions】， 获取用户信息成功以后，在next() 
- 如果没有获取到用户信息,则说明token失效了，我们需要销毁用户信息，重新登录，跳转到登录页面
```javascript

// 全局守卫，前置守卫（在路由跳转之前进行判断）
router.beforeEach(async (to, from, next) => {
  /* 
      // to 可以获取到你要跳转到哪一个路由信息
      // from 可以获取到你从哪个路由来的信息
      // next 是一个放行的函数
          - next() 放行
          - next('/login') next(path) 放行到指定的路由
          - next(false) 
  */
  //   next()
  // console.log(store) 仓库没有你想的那么高大上，可以理解为就是
  // 用户登录了才会有token，未登录一定不会有token 【先要用户进行登录， 登录了才有token，才能进行用户信息的判断，能否去跳转别的页面】
  let token = store.state.user.token
  // 获取用户信息,
  let name = store.state.user.userInfo.name
  // console.log(token)
  // 用户已经登录了
  if (token) {
    // 用户已经登录了还想去login 休想(不能去，停留在首页)
    if (to.path == '/login') {
      next('/home')
    } else {
      // 登录了，去的不是login 【home|search|detail|shopcart】访问的是别的页面
      // 如果用户名已有
      if (name) {
        next()
      } else {
        // 没有用户信息，派发actions让仓库存储用户信息在跳转
        try {
          // 有成功和失败了，就需要使用try&catch
          await store.dispatch('getUserInfo')
          //  获取用户信息成功，进行放行操作
          next()
        } catch (error) {
          // alert(error.message)
          // token失效了才会走这里，非常关键 获取不到用户信息，重新登录即可
          // 有很多网站，token经过一段时间都会失效
          // 1、清楚token 之前做过，需要派发actions
          // 用户进行识别的时候，有uuid和token两种，以token为大
          await store.dispatch('userLogout') // 退出登录
          next('/login')
        }
      }
    }
  }else {
    // 未登录暂时没有处理完毕，先这个样子，后期在进行处理
    next()
  }
})

注意：空对象在判断的时候返回的就是false

// 控制台打印
Boolean({})
true

全局守卫中的前置守卫

2、路由独享守卫

• 举例子：紫禁城【皇帝、太后、妃子】，是相应的【皇帝、太后、妃子】路由守卫

3、组件内守卫

• 我要去皇帝屋子（我已经到了皇帝屋子的外面了，还有一个守卫）