Day 20：全域、路由、元件内－Navigation Guards

之前有预告过，发送 API 的时机点需视不同情境及 UX 体验规划而定，因此除了选择在元件内的生命周期 created 发送，另外在 Vue Router 还有像警卫一般的「导航守卫（Navigation Guards）」，分别可以驻守在全域、路由和元件内。

在导航守卫文件的最底部，已先整理出 Resolution Flow 让我们知道３种守卫位置、７个守卫时机的先後顺序，以便根据专案需求在合适的时间点发送 API 或执行其他动作。

（图片来源：Vue Router - Navigation Guards - The Full Navigation Resolution Flow）

三种守卫位置分别在趋近目标路由的过程中慢慢收敛守卫范围，由大至小分别是在全域、路由、元件内调用。

导航守卫接收参数：to、from、next

• to：即将进入的目标路由
• from：准备离开的上个路由
• next（必选）：继续执行的 callback 函式，必须呼叫 next() 才会执行下一步；因此在所有导航守卫中为必选程序，在同一个导航守卫中可使用一或多次

全域设置 Global Resolve Guards

• beforeEach：进入每个路由之前

• beforeResolve：在路由完成跳转之前，但所有元件内守卫和路由元件已完成解析

• afterEach：每个路由完成跳转之後

• 应用范例：登入系统需要验证会员身份，部分路径内容会根据使用者身份限制浏览范围或操作行为，例如成为正式会员之後才能在网站内进行购买商品。因此会选择在全域 beforeEach 进入每一个路由之前就先判断会员目前的状态，若该路径仅限於会员才能进入，就会将使用者导向登入页面，引导使用者注册为会员。

  routes 中的每个路由物件称为 route record，通常会搭配设置 Route Meta 限制个别路由的权限，并在每次进入路由之前先判断 route record 所设置的 meta 状态，再做接下来的导向流程。

  const router = new VueRouter({
    routes: [
      {
          path: "/member",
          redirect: { name: "Profile" },
          component: MemberPage,
          children: [
            {
              path: "collection",
              name: "Collection",
              component: Collection,
            },
            {
              path: "collection/purchase/:bookName",
              name: "Purchase",
              component: Purchase,
              meta: { requiresAuth: true } // 设为需为登入状态
            },
          ],
        }
    ]
  })
  
  // 全域设置进入路由之前的时间点
  router.beforeEach((to, from, next) => {
    // 当路由物件的 meta 设有 requiresAuth 时
    if (to.matched.some(record => record.meta.requiresAuth)) {
  	// 尚未登入
      if (!Token) {
        next({ path: '/login' }) // 导向登入页面
      } else {
        next() // 登入成功，则可继续往下执行
      }
    } else {
      next() // 确保一定要使用 next()
    }
  })
  

路由设置 Per-Route Guard

• beforeEnter：准备进入单一路由之前
• 应用范例：进入首页之前需要取得轮播图资料，而进入产品列表时则需要取得所有产品清单，这些资料都仅针对满足单一路由的需求即可，因此只需要在该路由设置 beforeEnter，不会影响到其他路由。

元件设置 In-Component Guards

• beforeRouteEnter：路由进入元件之前
• beforeRouteUpdate：具有相同元件的路由发生更新时
• beforeRouteLeave：路由离开元件之前
• 应用范例：动态路由通常会有重复使用元件的情形，造成切换路由页面只会是单纯切换路径，但是并不会更新画面，因此需在元件内调用 beforeRouteUpdate 发送 API 即时接收资料，才能在路由切换之後重新接收资料并渲染至画面上。

参考资料

• Vue Router - Navigation Guards
• Vue Router - Route Meta Fields