vue-element-admin权限部分更改

前言

使用文档提供的方法和权限调用逻辑，根据项目的后台数据进行适配性修改。本身vue-element-admin配置的权限逻辑已经很完整清晰了，仅需要我们进行简单的适配就可以了。

一、vue-element-admin的权限逻辑

基本逻辑

    vue-element-admin项目<font size=1>（下面统称项目）</font>提供的方法主要是通过获取当前用户的权限去比对路由表，生成当前用户具有的权限可访问的路由表，通过router.addRoutes动态挂载到router上。
   如果想要页面权限是动态配置的，可以将路由表动态的存储到后端。在使用时调用后端数据根据路由表映射将路由映射到项目中。

const map={
 login:require('login/index').default // 同步的方式
 login:()=>import('login/index')      // 异步的方式
}
//你存在服务端的map类似于
const serviceMap=[
 { path: '/login', component: 'login', hidden: true }
]
//之后遍历这个map，动态生成asyncRoutes
并将 component 替换为 map[component]

逻辑修改

现在路由层面权限的控制代码都在 @/permission.js 中，如果想修改逻辑，直接在适当的判断逻辑中 next() 释放钩子即可。

项目逻辑调用

想要对项目的逻辑权限进行适应性修改就要先去梳理清楚他们提供的底层逻辑，基本上方法和逻辑的调用就是一环套一环。这里利用动态路由添加进行倒推。

1.首先导入动态添加路由和权限控制的

我们从完整项目demo中获取将所需要的权限部分进行引入

在demo代码项目包中获取整个permission文件夹进行迁移，迁移之后配置一下所需要的js和路由，使项目能够正常打开。(直接引入因为mock问题不能直接使用，所以演示在demo项目上演示，具体步骤不做详细解答)

在@/store/modules/permission.js文件中我们可以看到动态路由的添加方法，利用roles.includes(‘admin’)去判断获取到的roles中是否包含’admin’字符串，如果包含就打开所有的路由和权限。如果不包含则动态去添加用户所拥有的动态路由。

向上查找generateRoutes函数接受的两个参数的由来，在这里调用了permission/generateRoutes的方法，传入了roles值。同时可以看到roles的获取，是调用了user/getInfo方法。


向上查找getInfo方法的引入，发现是在api文件夹下的user.js中，也就是请求的后端接口。至此项目的主要动态路由和权限的大致流程就已经很清晰了。

1. 发起请求从后端获取用户路由和权限信息。
2. 将获取的信息用参数的形式传递给permission/generateRoutes方法。
3. 利用获取的roles认证用户所拥有的权限。
4. 获取到动态路由信息传递给filterAsyncRoutes方法进行路由处理。
5. 路由处理完成后返回信息。
6. 利用router.addRoutes(accessRoutes)添加动态路由。

二、对vue-element-admin权限进行适配

分析和了解项目的路由和权限的获取和使用逻辑之后，找到关键点数据请求到之后的roles字段的信息和asyncRoutes动态路由。

由于项目中与动态路由相关的函数使用设计的地方比较多，所以建议将存储的字段信息向他们定义好的格式转换。

​我们里用项目中的权限管理进行简单修改获取，首先我们定义一下动态增加路由的字段。然后给这些字段进行文件位置指向。

之后利用接口获取到的接口json数据，去匹配在map中定义的网页地址。在项目中动态增加路由和路由指向。

下面就需要将我们所配置好的后台接口进行数据的接收和返回了，这里我们定义一个新的api方法。

去获取level中的数据列表，如果表单存储的格式和项目中使用的方法存在差异的啊话，我们可以写一个方法进行数据的啊清洗。

  // get Menu
  getMenu({ commit, state }) {
    return new Promise((resolve, reject) => {
      getMenu(state.token).then(reponse => {
        const { data } = reponse
        data.model = JSON.parse(data.model)//获取到存储的数据转换为字符串
        data.model.map(i => {//对数据进行遍历处理
          i.component = Layout//项目默认的路由配置
          i.meta = {//赋值给其name和title
            title: i.name,
            icon: 'table'
          }
          i.children.map(j => {//为子元素进行遍历
            j.meta = {
              title: j.name
            }
          })
        });
        resolve(data)
      }).catch(error => {
        reject(error)
      })
    })
  },

在处理完成权限获取之后我们将处理过的数据进行动态路由生成，这就涉及到上面所说的accessRoutes和router.addRoutes(accessRoutes)的使用。将数据通过permission/generateRoutes函数进行处理，然后返回动态路由。（accessRoutes.push({ path: ‘*’, redirect: ‘/404’, hidden: true })最后添加404页面路由，因为当项目检测到404页面之后后面的路由将会被劫持。 ）

          const menu = await store.dispatch('user/getMenu')
          const accessRoutes = await store.dispatch('permission/generateRoutes', menu.model)
          accessRoutes.push({ path: '*', redirect: '/404', hidden: true })
          router.addRoutes(accessRoutes)