前端中后台权限按钮实现方案

参考juejin.cn/post/690602…

我的方案：全局自定义指令。

以Vue为例。

1.在router/index.js里封装全局指令

// 权限按钮数据
let permissionBtn = []
import axios from '../serve/request'
axios.post(`/tsUser/queryPermissionTree`).then(res => {
  permissionBtn = res.data.buttons;
  sessionStorage.setItem('permissionBtn', permissionBtn)
})
function checkArray(key) {
  let index = permissionBtn.indexOf(key)
  if (index > -1) {
    return true // 有权限
  } else {
    return false // 无权限
  }
}
// 定义一个全局权限按钮指令
export const permission = {
  inserted(el, binding) {
    let permission = binding.value // 获取到 v-permission的值
    if (permission) {
      let hasPermission = checkArray(permission)
      if (!hasPermission) {
        // 没有权限 移除Dom元素
        el.parentNode && el.parentNode.removeChild(el)
      }
    }
  },
}

2.在main.js注册

// 权限按钮
import {
  permission
} from './router/index.js'
Vue.directive('permission', permission)

3.直接在需要加装权限的地方使用即可。

          <el-button
          type="primary"
          icon="el-icon-plus"
          @click="add"
          v-permission="'yzztgltj'"//权限编码
          >添加
          </el-button
        >