你可能不清楚的 Vue Router 深度用法（一）

Vue Router 简单易上手，能实现大部分的需求。可是，若是在项目里须要更细致的控制路由，以实现与其同步的效果，就须要挖掘其文档里没详细说起的内容。第一章为路由元信息用途挖掘。

路由元信息用途

（1）验证用户身份

大部分项目，除了登陆页、重置密码页、用户协议页之外，页面都须要验证用户身份进行访问。使用 Vue Router 能够配合后端进行双重验证。

---

（登陆）验证身份方法：

一、给须要验证的路由对象添加 meta 字段，里面自定义一个表明验证的字段：

const router = new VueRouter({
  routes: [
    {
      path: '/foo',
      component: Foo,
      children: [
        {
          path: 'bar',
          component: Bar,
          meta: { 
              requiresAuth: true // 添加该字段，表示进入这个路由是须要登陆的
          }
        }
      ]
    }
  ]
})

二、在全局导航钩子里验证 requiresAuth 字段：

注意事项：

• 使用 beforeEach 在路由变化前验证。验证原理是在跳转前，访问目标路由对象的 requiresAuth 字段判断是否须要验证用户身份，如为是，检测是否有保存用户信息（即用户登陆成功后前端保存的信息，例如 token）
• 每一个路由都有一个 $route.matched 数组，包含当前路由的父级路由对象和当前路由对象，在组件中能够经过 this.$route.matched 访问
• beforeEach 的 to 参数即目标路由对象 $route，to.matched 便是它的路由数组
• 所以，使用 some 方法，只要路由数组里的任意路由对象须要验证身份，即进行验证
• 验证成功跳转正确页面；失败则跳到登陆页，将目标地址附在 url 的 query 里，登陆成功就跳转到目标地址

router.beforeEach((to, from, next) => {
  if (to.matched.some(record => record.meta.requiresAuth)) {
    if (!auth.loggedIn()) {  // 没登陆
      next({
        path: '/login',
        query: { redirect: to.fullPath }
      })
    } else {
      next()  // 确保必定要调用 next()
    }
  } else {
    next() // 确保必定要调用 next()
  }
})

三、拦截 http 请求，验证用户身份

为了防止本地保存的 token 过时，须要拦截 http 请求，为每次请求头加上 token ，而后拦截 http 响应，根据响应内容判断是否须要跳回登陆页面从新登陆。使用 axios 的方法以下：

// http request 拦截器
axios.interceptors.request.use(
    config => {
        if (auth.loggedIn()) { // 判断是否存在token，若是存在的话，则每一个http header都加上token
            config.headers.Authorization = `token ${auth.loggedIn()}`;
        }
        return config;
    },
    err => {
        return Promise.reject(err);
    });

// http response 拦截器

axios.interceptors.response.use(
    response => {
        return response;
    },
    error => {
        if (error.response) {
            switch (error.response.status) {
                case 401:
                    // Unauthorized
                    // 返回 401 清除token信息并跳转到登陆页面
                    auth.clear();
                    router.replace({
                        path: 'login',
                        query: {
                            redirect: router.currentRoute.fullPath
                        }
                    })
            }
        }
        return Promise.reject(error.response.data) // 返回接口返回的错误信息
    });

---

（2）定义用户权限能访问的页面

前端查看权限，也是配合后端进行某些页面的隐藏显示功能。通常应用于综合的办公系统，由 IT 部分配帐号，不一样部门的人只能看到本身负责的内容，例如行政部不会看到财务数据页面。

实现方法：

1. 与后端商定每一个用户角色对应的 level 级别，以数值表示
2. 前端路由每一个页面的 meta 对象添加 level 字段，值为数组，里面是有权限访问页面的 level 数值
3. 登陆成功，后台返回用户 token 的同时，返回其所属的 level 字段
4. 组件代码比较目标页面的 level 与用户 level，只显示包含在目标 level 数组里的页面
5. 全局导航钩子 beforeEach 里比较目标页面的 level 与用户 level，包含在目标 level 数组里则正确跳转，反之取消跳转并提示权限不足

上面第5步是为了防止用户直接在浏览器输入目标地址

---

（3）其余内容控制

能够控制显示路由固定的搭配，例如某个路由地址的 title 是固定的字符串、固定的欢迎语、固定的 favicon 等。在组件里经过 this.$route.meta.xxx 访问。

const router = new VueRouter({
  routes: [
    {
      path: '/foo',
      component: Foo,
      children: [
        {
          path: 'bar',
          component: Bar,
          meta: { 
              title: '标题',
              message: '欢迎您',
              requiresAuth: true // 添加该字段，表示进入这个路由是须要登陆的
          }
        }
      ]
    }
  ]
})

第二章的内容在此 https://segmentfault.com/a/11...