美文网首页
vue 路由元信息 阻止或者拦截

vue 路由元信息 阻止或者拦截

作者: 华华00526 | 来源:发表于2019-03-12 11:55 被阅读0次

为什么会有路由元信息这个东西?

我们在做网站登录验证的时候,可以使用到beforeEach 钩子函数进行验证操作,如下面代码 ,如果页面path为’/goodsList’,那么就让它跳转到登录页面,实现了验证登录。

router.beforeEach((to, from, next) => {

  if (to.path === '/goodsList') {

    next('/login')

  } else

    next()

})

如果需要登录验证的网页多了怎么办?

1.这里是对比path。如果需要验证的网页很多,那么在if条件里得写下所有的路由地址,将会是非常麻烦的一件事情。

2.因为路由是可以嵌套的。有’/goodsList’,那么可能会有’/goodsList/online’,再或者还有’/goodsList/offline’、’/goodsList/audit’、’/goodsList/online/edit’等等。

如果像刚才例子中这样对比(to.path === ‘/goodsList’),就非常单一,其他的路径压根不会限制(验证)到,照样能正常登陆!因为每个to.path根本不一样。

我们所理想的就是把’/goodsList’限制了,其他所有的以’/goodsList’开头的那些页面都给限制到!

to Route: 即将要进入的目标 路由对象

我们打印一下to

它有很多属性,有

- fullPath

- hash

- matched

- meta

- name

- params

- path

- query

其中有个属性,matched,就是匹配了的路由,我们打印出来,这个是个数组。它的第一项就是{path: “/goodslist”},一直到最为具体的当前path (例如:{path: “/goodslist/online/edit”})

这里可以循环matched这个数组,看每一项的path 有没有等于’/goodsList’,只要其中一个有,那么就让它跳转到登录状态

router.beforeEach((to, from, next) => {

  if (to.matched.some(function (item) {

    return item.path == '/goodslist'

  })) {

    next('/login')

  } else

    next()

})

那么这里只是对goodsList进行验证判断,且限制的还是path,如果页面中还有会员列表、资讯列表、广告列表都需要进行验证的时候,用path来做限制似乎有点不好用。轮到主角登场了

meta字段(元数据)

直接在路由配置的时候,给每个路由添加一个自定义的meta对象,在meta对象中可以设置一些状态,来进行一些操作。用它来做登录校验再合适不过了

{

  path: '/actile',

  name: 'Actile',

  component: Actile,

  meta: {

    login_require: false

  },

},

{

  path: '/goodslist',

  name: 'goodslist',

  component: Goodslist,

  meta: {

    login_require: true

  },

  children:[

    {

      path: 'online',

      component: GoodslistOnline

    }

  ]

}

这里我们只需要判断item下面的meta对象中的login_require是不是true,就可以做一些限制了

router.beforeEach((to, from, next) => {

  if (to.matched.some(function (item) {

    return item.meta.login_require

  })) {

    next('/login')

  } else

    next()

})

相关文章

  • vue 路由元信息 阻止或者拦截

    为什么会有路由元信息这个东西? 我们在做网站登录验证的时候,可以使用到beforeEach 钩子函数进行验证操作,...

  • vue+axios 实现登录拦截权限验证

    vue+axios 前端实现登录拦截(路由拦截、http拦截) 一、路由拦截 登录拦截逻辑 第一步:路由拦截 首先...

  • vue+axios 实现登录拦截权限验证

    vue+axios 前端实现登录拦截(路由拦截、http拦截) 一、路由拦截 登录拦截逻辑第一步:路由拦截首先在定...

  • vue接口拦截

    接口拦截 路由拦截 接口拦截应该指的是 http 请求拦截路由拦截是 vue 这种框架里的拦截登录拦截是一个需求,...

  • vue-router路由守卫

    vue-router导航钩子 vue-router导航钩子的主要作用是拦截导航,让路由完成跳转或者取消; 导航钩子...

  • vue-router 常用知识点三

    目录 - 1.vue-router 路由元信息 - 2.vue-router 数据获取 - 3.vue-rout...

  • vue路由元信息

    meta:路由元信息 路由记录定义:routes配置的每一个路由对象都称为路由记录特点:路由记录是可以嵌套的,如果...

  • vue-router元信息

    基本的vue-router (router文件夹下的js) 路由元信息 定义 作用 用来标记这个路由信息是否需要检...

  • vue-router的元信息

    基本的vue-router 路由元信息 定义 作用用来标记这个路由信息是否需要检测,true 表示要检测,fals...

  • 关于vue实现路由拦截登陆判断跳转对应的页面

    关于vue实现路由拦截登陆判断跳转对应的页面

网友评论

      本文标题:vue 路由元信息 阻止或者拦截

      本文链接:https://www.haomeiwen.com/subject/utpgpqtx.html