Vue后台管理系统按钮鉴权

按钮权限控制就是说对于不同的用户，可操作的按钮是不一样的，比如有些按钮有些用户是看不见，有些用户是可以看得见的。应用场景：用户A能看得到‘新增’按钮，而用户B是看不到‘新增’按钮的

按钮鉴权通常有两种做法：

1、定义一个全局方法，页面中配合v-if实现；

思路：在用户登录成功后，获取到用户的按钮权限（数组格式），存储到store中，然后在工具类中定义一个公共函数hasPermission，在按钮调用hasPermission()函数，把传入的关键字和store中的按钮权限进行比对，看看是否存在，存在就显示，不存在就隐藏

2、使用自定义指令

思路：同上，也是先定义一个全局方法，然后写一个全局自定义指令，在页面中通过自定义指令来判断

下面就来介绍一下怎么做吧......

方法一：

代码中的permissionArr就是每一个按钮的标识

// 获取用户菜单权限
async getUser({ commit, state, dispatch }) {
  const userRes = await userGet()
  commit('SET_USER', userRes.result)
  const rouleRes = await userAppGet()
  commit('SET_ROLES', rouleRes.result)
  const menuRes = await userMenuGet(settings.appKey)
  if (menuRes.isSuccess) {
    const permissionArr = []
    function hasPermission(item) {
      item.map(i => {
        i.permissions.map(value => {
          if (value.name != '') {
            permissionArr.push(value.name)
          }
        })
        if (i.childs && i.childs.length > 0) {
          hasPermission(i.childs)
        }
      })
    }
    hasPermission(menuRes.result.menus)
    state.permissionList = permissionArr
    return menuRes
  } else {
    Message({
      message: menuRes.message,
      type: "error"
    });
  }
},

接下来定义一个全局方法

// 按钮鉴权
import store from '@/store'
export function hasPermission(permission) {
    // permissionList是有权限的按钮数组
    const myPermissions = store.state.user.permissionList
    return myPermissions.indexOf(permission) > -1   //传的参数与myPermissions匹配，能匹配上说明有权限
}

main.js中全局注册 

 最后直接在页面中通过v-if显示隐藏：

 方法二：定义一个全局函数（同上），引入指令函数中，然后开始写全局自定义指令

/**
 * 按钮鉴权
 */
import { hasPermission } from '../utils/has-permissions'
export default {}.install = (Vue, options = {}) => {
    Vue.directive('permission', {
        inserted(el, binding) {
            const permission = binding.value   //获取v-permission的值
            if (permission) {
                const buttonPermission = hasPermission(permission)
                if (!buttonPermission) {    //没有权限，移出Dom元素
                    el.parentNode && el.parentNode.removeChild(el)
                }
            }
        }
    })
}

 在main.js中注册

最后我们就可以在页面中通过v-permission来判断是否有权限啦