前言

在我们业务项目开发中,会遇到按钮级权限控制的需求

本文更多的是分享和经历,因为这次的业务需求,并不是通用的权限指令

比如我们内部业务中是按页面来获取权限信息~

业务场景复现

彦祖们, 下面就来看下笔者目前遇到的屎山代码的目录结构

优化前目录结构

• 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))
    }
}

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

彦祖们 想必你们看到这里已经快顶不住了吧😭 这谁顶得住啊...要我也是一手关闭

昨天看了下

btnCodeMap.js 已经堆成这样了...

btnMixin.js 已经这样了

再过几个月 估计就是这样了...

听到同事最痛心的一句话就是 我的滚轮都滚累了

指令实现

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

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

理想的使用方式

<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
        })
     } 
    
}

完整代码

import router from '../router/'
import { getBtnList } from '@/api/user' // 业务接口

const permissionObj = Object.create(null)
const codeElementMap = new Map()

const getCurrentPermission = () => {
  const { viewId } = router.history.current.meta
  return new Promise(resolve => {
    getBtnList(viewId).then(resolve)
  })
}

const handleElPermission = (el, permission) => {
  if (permission === false) el.remove()
}

export const permission = {
  inserted(el, binding, vnode, oldVnode) {
    const { value: code } = binding

    if (!code) return // 无 code 不处理

    const { viewId } = router.history.current.meta

    if (permissionObj[viewId] instanceof Promise) return // 当前页面正在请求权限数据,防止重复请求

    // 当前页面已经存在权限数据 直接操作
    if (permissionObj[viewId]) {
      const elPermission = permissionObj[viewId][code]
      handleElPermission(el, elPermission)
      return
    }

    // 建立 code el 映射
    if (codeElementMap.has(code)) return codeElementMap.get(code).push(el)
    else codeElementMap.set(code, [el])

    // 设置当前页面各按钮权限
    const request = getCurrentPermission()
    permissionObj[viewId] = request

    request.then((res) => {
      // 设置 viewId 对应的 permission {viewId:{code:true|false}}
      const viewPermission = (res.data ?? []).reduce((prev, { permission, resourceCode }) => {
        prev[resourceCode] = permission
        return prev
      }, {})

      permissionObj[viewId] = viewPermission

      const elPermission = viewPermission[code]
      const elements = codeElementMap.get(code)
      elements.forEach(el => {
        handleElPermission(el, elPermission)
      })
    }).catch(() => {
      permissionObj[viewId] = null
    })
  },
  // 解绑时候, 释放 code 对应的内存
  unbind(el, binding, vnode) {
    const code = binding.value
    codeElementMap.delete(code)
  }
}

写在最后

业务项目中 遇到 屎山代码 是难以避免的,不过总得有人负重前行

幸运的是 我们及时发现并避免了它

但是各位彦祖们 请不要轻易尝试~

因为 改好了没业绩, 改坏了就是你的大锅...

个人能力有限

如有不对,欢迎指正🌟 如有帮助,建议小心心大拇指三连🌟

彩蛋

宁波团队还有一个hc, 带你海鲜自助。 欢迎彦祖们私信😚