你可能不清楚的 Vue Router 深度用法(一)

栏目: JavaScript · 发布时间: 5年前

内容简介:Vue Router 简单易上手,能实现大部分的需求。但是,如果在项目里需要更细致的控制路由,以实现与其同步的效果,就需要挖掘其文档里没详细提及的内容。第一章为路由元信息用途挖掘。大部分项目,除了登录页、重置密码页、用户协议页以外,页面都需要验证用户身份进行访问。使用 Vue Router 可以配合后端进行双重验证。(登录)验证身份方法:

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

路由元信息用途

(1)验证用户身份,定义用户权限能访问的页面

大部分项目,除了登录页、重置密码页、用户协议页以外,页面都需要验证用户身份进行访问。使用 Vue Router 可以配合后端进行双重验证。

(登录)验证身份方法:

1、给需要验证的路由对象添加 meta 字段,里面自定义一个代表验证的字段:

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

2、在全局导航钩子里验证 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()
  }
})

3、拦截 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) // 返回接口返回的错误信息
    });

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

实现方法:

  1. 前端路由每个页面的 meta 对象添加 level 字段,设置 0 ~ n 级别
  2. 登录成功,后台返回用户 token 的同时,返回其所属的 level 字段
  3. 组件代码比较目标页面的 level 与用户 level,只显示目标 level 小于等于用户 level 的页面
  4. 全局导航钩子 beforeEach 里比较目标页面的 level 与用户 level,小于等于目标 level 则正确跳转,反之取消跳转并提示权限不足

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

(2)其他内容控制

可以控制显示路由固定的搭配,例如某个路由地址的 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 // 添加该字段,表示进入这个路由是需要登录的
          }
        }
      ]
    }
  ]
})

以上所述就是小编给大家介绍的《你可能不清楚的 Vue Router 深度用法(一)》,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对 码农网 的支持!

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

深入理解TensorFlow:架构设计与实现原理

深入理解TensorFlow:架构设计与实现原理

彭靖田、林健、白小龙 / 人民邮电出版社 / 2018-5-1 / 79.00元

本书以TensorFlow 1.2为基础,从基本概念、内部实现和实践等方面深入剖析了TensorFlow。书中首先介绍了TensorFlow设计目标、基本架构、环境准备和基础概念,接着重点介绍了以数据流图为核心的机器学习编程框架的设计原则与核心实现,紧接着还将TensorFlow与深度学习相结合,从理论基础和程序实现这两个方面系统介绍了CNN、GAN和RNN等经典模型,然后深入剖析了TensorF......一起来看看 《深入理解TensorFlow:架构设计与实现原理》 这本书的介绍吧!

XML、JSON 在线转换
XML、JSON 在线转换

在线XML、JSON转换工具

正则表达式在线测试
正则表达式在线测试

正则表达式在线测试

RGB HSV 转换
RGB HSV 转换

RGB HSV 互转工具