关于vue-admin-template的权限控制改造

前言

在看本篇文章之前首先要了解熟悉vue-admin-template模板。

什么是vue-admin-template？

这是一个极简的 vue admin 管理后台。它只包含了 Element UI & axios & iconfont & permission control & lint，这些搭建后台必要的东西。

权限控制的改造

我们按照vue-admin-template官网运行代码会看到以下页面

由于没有写后端接口，我们全权用项目中的mock，模拟后端接口请求，我们在mock文件夹下的user.js会看到系统设置了两个登陆人，一个admin，一个editor，我们模拟添加一个新的用户limm

添加完用户之后，我们就要想，动态权限分配，就是我们用不同的角色登陆，会有不同的菜单。比如系统管理员，会有人员管理的权限、业务管理员，会有业务管理的权限。

首先我们得研究一下页面中登陆之后菜单的显示

菜单的显示

我们在这个层级目录下

看到菜单是根据路由取循环出来的

路由循环

获取路由

看到这里，大概思路就出来了，假设我登陆不同的角色，能够获得到不同的路由，这样不就实现动态权限的管理了。要想实现动态路由，我们只需要实现路由是在登陆之后请求到的，这样的话，实际开发中，我们只需要在登录之后调用后端接口，给后端传送过去roleId，后端反不同路由过来，就行了，实际需要动态的路由我们存储在数据库中，至于后端的逻辑，只需要后端根据你传送的不同角色，或者后端从session中取到用户信息，给你返回不同的路由就行。

这里我比较懒，也就没有新建页面，直接拿router.js中的form的路由去掉

注释掉form路由定义

页面菜单显示

菜单显示

此时页面显示缺少form，我们把form作为动态路由添加进来。我们观察到路由共有的元素有：

path， component，name，meta，children这五个元素所以我们就mock按照注释掉form路由定义的路由去造一下数据，代码我粘贴如下：

const Mock = require('mockjs')

const data = Mock.mock({

'dataList': [{

path: '/form',

component: 'Layout',

name:'Corm',

meta:{},

children: [{

path: 'index',

name: 'Form',

component: '/form/index',

meta: {

title: 'Form',

icon: 'form'

},

children:null

}]

}]

})

module.exports = [

  {

    url: '/vue-admin-template/router/list',

    type: 'get',

    response: config => {

      const items = data.dataList

      return {

        code: 20000,

        data: {

          total: items.length,

          dataList: items

        }

      }

    }

  }

]

然后我们在store/modules/user添加state.routerList，我们将获取的动态路由存储在store中。

api/user：

接口定义

登陆之后，在permission.js中调用获取动态路由

const menus = filterAsyncRouter(store.getters.routerList) // 1.过滤路由

router.addRoutes(menus) // 2.动态添加路由

global.antRouter = menus // 3.将路由数据传递给全局变量，做侧边栏菜单渲染工作

过滤方法

_import方法：

在router文件夹下创建文件：

根据不同的环境引用

注意事项：

后端返回的children中的component与组件中的文件夹和文件名一直，这样在_import方法中才能引用的到，否则会报错。Layout组件以字符串返回在filterAsyncRouter方法中会做出映射。

以上是全部动态路由权限的介绍，如果有不清楚的，代码已经传到码云上：https://gitee.com/jackmingming/vue-demo，欢迎大家参考。

手写不易，希望大家给个关注，给个赞！谢谢！