优化前目录结构

• views
  • A.vue
  • B.vue
  • C.vue
  • D.vue
  • …
• mixins
  • btnCodeMap.js
  • btnMixins.js

案例介绍

下面 我们以 A页面新增按钮 权限为例,来介绍一下这些文件的作用

• A.vue 页面文件

<el-button v-if="!hideBtnAdd">新增</el-button>

• btnCodeMap.js 按钮权限配置文件

// A 页面 button 权限 ,
export const btnCodeMapA = [{
  title: '主表新增',
  resourceCode: 'add-A',
  hideBack: (self) => {
    self.hideBtnAdd = true
  }
}, {
  title: '主表编辑',
  resourceCode: 'edit-A',
  hideBack: (self) => {
    self.hideBtnEdit = true
  }
}]
// 之后新增页面 就要在这里继续配置...

• btnMixin.js 按钮权限请求文件

import {btnCodeMapA} from './btnCodeMap.js'
export const btnMixin = {
    data(){
        return {
            hideBtnAdd:false // 每增加一个权限都要新增一个变量...
        }
    },
    created(){
        // 获取后端权限 省略...
        const permissionList = await getPermissionList()
        // 此处获取 A 页面的配置权限映射, 也就是 btnCodeMapA
        const btnCodeMapA = this.getMap() 
        // 然后各种循环遍历 拿到无权限的列表 hideList, 并执行 hideBack 回调
        const hideList = btnCodeMapA.forEach(()=>permissionList.forEach()...)
        hideList.forEach((item)=>item.hideBack(this))
    }
}

也就是说一个按钮权限的变动,需要改动三处文件,并且命名需要一一对应

彦祖们 想必你们看到这里已经快顶不住了吧😭 这谁顶得住啊…要我也是一手关闭，微信搜索公众号：架构师指南，回复：架构师 领取资料 。

指令实现

其实笔者一开始想的还是比较简单的,一个简单的权限指令就能解决了

但是因为我们的权限数据是根据页面请求的,所以还是会稍有不同。

理想的使用方式

<span v-permission="audit">审核</span>

最初版本

• permission.js

const permissionList = getPerimissionList() // 获取后端权限数据
export const permission = {
  inserted(el, binding, vnode, oldVnode) {
      // 此时发现了数据异步问题,数据还没返回
  }
}

实际问题

下面就实际开发遇到的三个难点 分享一下笔者的经历

1.数据异步问题

2.解决多个指令的 重复请求 问题

3.解决表格单列多个 相同 code 节点移除问题

下面只展示了部分核心代码,彦祖们可以直接看完整版本

数据异步问题

其实这个问题 笔者想了好几种方案

1.使用路由守卫来拦截请求,之后 再 next 跳转

这种方式 在请求超时的场景下,会导致页面白屏卡段(虽然几率不大…)

2.直接在指令 inserted 钩子内部请求

export const permission = {  inserted(el, binding, vnode, oldVnode) {      await getPerimissionList()  }}

最终还是选了 方案2 虽然牺牲了部分通用性, 但是个人认为更符合 高内聚 的原则

多个指令的重复请求问题

想象一下,如果一个页面中存在多个指令

那么就会多次 进入 inserted 钩子

也就是说会调用多次 getPerimissionList

<span v-permission="audit">审核</span><span v-permission="unAudit">取消审核</span><span v-permission="confirm">确认</span>

此时 我们就要维护一个 permissionObj 用来存储页面权限const permissionObj = Object.create(null)
export const permission = { 
    inserted(el, binding, vnode, oldVnode) { 
        const res = await getPerimissionList() 
        const { viewId } = router.history.current.meta //我们内部的业务数据,每个路由唯一
        permissionObj[viewId] = res
     } 
    
}

看到这里 彦祖们是不是还不是很明白 这和解决重复请求有半毛钱关系?

的确一开始 笔者也没想到好的解决方案,但是 permissionObj 既然能存储数据,那不也就能存储 Promise吗?

const permissionObj = Object.create(null)const handleElPermission = (el, permission) => {  if (permission === false) el.remove()}export const permission = {     inserted(el, binding, vnode, oldVnode) {         const { viewId } = router.history.current.meta //我们内部的业务数据,每个路由唯一        const {value} = binding        // 说明当前页面正在请求数据        if(permissionObj[viewId] instanceof Promise) return                // 当前页面已经有权限数据 直接操作        if(permissionObj[viewId]){          handleElPermission(permissionObj[viewId],el)          return        }                const p = getPerimissionList()         permissionObj[viewId] = p // 把 Promise 复制给permissionObj[viewId] 表示正在请求                p.then(res=>{            permissionObj[viewId] = res            handleElPermission(el,res[value])        }).catch(e=>{            permissionObj[viewId] = null        })             }     }

多个相同 code 节点移除问题

这种场景存在表格中,比如表格的操作列中 每一行存在一个 编辑 按钮

那么 10 行数据就有 10 个编辑按钮

也就是说 等权限接口回来,我们需要操作这 10 个按钮<el-button v-permission="edit">编辑</el-button>

此时我们遇到的一个难题就是, 用什么方式来存储这么多的 dom 节点

彦祖们 可以停下来 想一下有什么好的方案?

笔者后来用 Map 数据结构 解决了这个问题

const codeElementMap = new Map()
export const permission = { 
    inserted(el, binding, vnode, oldVnode) { 
        const {value:code} = binding
// 建立 code el 映射,用来存储 el
        if (codeElementMap.has(code)) return codeElementMap.get(code).push(el)
        else codeElementMap.set(code, [el])

        p.then(res=>{
            permissionObj[viewId] = res

            const els = codeElementMap.get(code)
            els.forEach(el=>{
                handleElPermission(el,res[code])
            })
        }).catch(e=>{
            permissionObj[viewId] = null
        })
     } 

}