Vue核心技术-43,vue-router-路由元信息

一,前言

这篇介绍一下路由元信息的使用
路由元信息和导航守卫配合使用可以起到类似权限校验的作用

---

二,路由元信息介绍

路由器中routes配置中的每个路由对象为路由记录
路由记录可以嵌套,所以,当一个路由匹配成功后，可能同时匹配多个路由记录
以上篇Demo中的嵌套路由为例:
商品:/product
商品列表:/product/productList
商品详情:/product/productListdetail/:id
当匹配到商品详情时,同时也会匹配到商品和商品列表

$route对象中$route.matched 数组记录路由匹配到的所有路由记录
因此,可以通过遍历$route.matched数组检查路由记录中的meta字段。

在全局前置守卫中遍历$route.matched对象:

---

三,路由元信息应用

需求:

通过上面的分析,可以做出一个需求,当导航切换时,
如果页面需要授权才能访问,判断是否授权,若未授权跳转至登陆页面

实现

正常的,当用户登陆后,用户信息会被保存起来,如token
当需要验证授权时,检查是否有token值即可

路由配置中,为授权访问页面添加元信息:

const router = new VueRouter({
  routes: [
    {
      path: '/product',
      component: Product,
      children: [
        {
          path: 'productList',
          component: ProductList,
          children: [
              {
                  path: 'detail/:id',
                  component: ProductDetail,
                  // 元信息
                  meta: { requiresAuth: true }
              }
        }
      ]
    }
  ]
})

在全局路由守卫-前置守卫中对元信息进行校验

router.beforeEach((to, from, next) => {
  console.log("导航守卫-全局守卫-前置");
  if (to.matched.some(record => record.meta.requiresAuth)) {
    if (!auth.loggedIn()) {// 验证是否授权
      next({
        path: '/login',
        query: { redirect: to.fullPath }
      })
    } else {
      next()
    }
  } else {
    next() // 确保一定要调用 next()
  }
})

在全局前置守卫中验证页面访问是否需要授权
如果需要授权,判断授权状态,未授权则携带当前地址跳转至登陆页面

---

四,结尾

本节介绍了路由元信息的使用,配合导航守卫可以对授权做校验