Vue 页面权限控制(一)

---

前言

1.如果您有Vue-router基础,那么放心食用本文吧.
2.本文只介绍beforeEach法;
3.vue-router2.2以上版本的addRoutes()动态路由注入法可以更好地实现权限系统,我会在后续的更新(二)里补全.

---

一、路由元信息和beforeEach()

用户点击某个模块会让URL发生变化,进而带动router执行切换页面的动作,那么只要阻止路由跳转或者让路由定向跳转就能实现阻止用户进入某些高权限页面.
但在开始之前,我还要给您介绍两样东西:

1、路由元信息

您可能没听说过这个词,不用着急;
我不给您扯那些官方文案了,路由元信息在meta对象里配置,一个元信息针对一份路由,在其内部可以写键值对,即一对自定义字节和他们的值:

  {
   
    path: '/userinfo',
    name: 'Userinfo',
    //路由元信息meta;
    meta: {
     
      istoken: true
    //自定义字节istoken,值为true;
    },

就是这样了,我不深说了,因为这里我们只是需要用meta对象内的键值对作为该路由记录是否需要执行beforeEach异步判断和需要执行判断时需要执行哪个beforeEach()的判别条件.

2、beforeEach()

router.beforeEach() 用来规定一些进入页面的限制,比如不登陆无法进入
你可以拿到一些有关用户账号权限的关键信息(比如meta信息),在里面做一些判断,然后利用beforeEach()的next()方法来告诉路由这波怎么说(是把尊敬的用户踹回去登录还是让他进页面);

//注意这里传入的三个参数;