vue权限管理---按钮权限如何写？

一、问题描述

我们都知道前端权限控制主要也就四个方面
1、菜单的控制

在登录请求中，会得到权限数据（有可能后端会返回完整的路由，也有可能只返回一个路径数组，前端按情况去做相应代码编写即可）这个需要后端返回的数据支持，前端根据权限数据，展示对应的菜单，点击菜单，才能看到相关的界面

2、界面的控制

如果用户没有登录，手动在地址栏敲入管理界面的地址，则需要跳转到登录界面，如果用户已经登录，可是手动敲入非权限内的地址，则需要跳转到404界面

3、按钮的控制

在某个菜单的界面中，还得根据权限数据，展示出可进行操作的按钮，比如增加、删除、修改、查看

4、请求和响应控制

如果用户通过非常规操作，比如通过浏览器调试工具将某些禁用的按钮变成启用状态，此时发的请求，也应该被前端所拦截

这篇文章主要介绍一下按钮的权限控制如何实现

二、方法一

首先是拿到数据, 在后台中, 一般进行权限控制, 是根据用户获取对应的数据, 这里我是通过登录获取到返回的权限数组，然后将其保存到vuex中的state里，如下图所示，此时这个用户只能删除权限

自定义指令, 用来判断按钮是否展示, 创建 premission.js 文件

import Vue from 'vue'
import store from '../store/index.js'
//自定义指令，用来控制按钮权限
Vue.directive('permission', {
    
    
  inserted (el, binding) {
    
    
    // 当前按钮传递的值( v-permission="'add'" 中的值)
    const currentTag = binding.value.action
    const effect = binding.value.effect
    // 获取到存放在 store 中的权限数据
    const currentRight = store.state.user.role.rights
    // 判断是否存在对应的按钮权限
    let item = currentRight.filter((item) => {
    
    
      return item === currentTag
    })
    //不具备权限则删除（隐藏）或者禁用该按钮 (el.parentNode 获取当前节点的父节点),根据在芫荽绑定的值去决定
    if (item.length === 0) {
    
    
      if (effect === 'disabled') {
    
    
        el.disabled = true
        el.classList.add('is-disabled')
      } else {
    
    
        el.parentNode.removeChild(el)
      }
    }
  }
})

在页面中使用按钮时, 用上自定义的 v-premission 指令

如下图，有两个按钮，一个编辑按钮，一个删除按钮，但是一句上面返回的权限，只有删除权限，按照下图的代码，那么此时，我们在页面上应该可以看到编辑按钮是被禁用的，删除按钮时可用的。

最终的效果

注意：在vue3中，使用方式有所不同

permission.js文件

import App from './App.vue'
import store from '../store/index.js'
const app = createApp(App);

app.directive('permission', {
    
    
   mounted(el, binding) {
    
    
      // 当前按钮传递的值( v-permission="'add'" 中的值)
	    const currentTag = binding.value.action
	    const effect = binding.value.effect
	    // 获取到存放在 store 中的权限数据
	    const currentRight = store.state.user.role.rights
       // 判断是否存在对应的按钮权限
	    let item = currentRight.filter((item) => {
    
    
	      return item === currentTag
	    })
	    //不具备权限则删除（隐藏）或者禁用该按钮 (el.parentNode 获取当前节点的父节点),根据在芫荽绑定的值去决定
	    if (item.length === 0) {
    
    
	      if (effect === 'disabled') {
    
    
	        el.disabled = true
	        el.classList.add('is-disabled')
	      } else {
    
    
	        el.parentNode.removeChild(el)
	      }
    	}
   }
})

三、方法二

第一种方法是使用自定义指令用来做权限，第二种方法是使用函数来判断是否有权限。

首先是拿到数据, 在后台中, 一般进行权限控制, 是根据用户获取对应的数据, 这里我是通过登录获取到返回的权限数组，然后将其保存到vuex中的state里，如下图所示，此时这个用户只能删除权限

创建函数, 用来判断按钮是否展示, 创建 premission.js 文件

import store from '../store/index.js'
//第二种方式
/**
 * 判断是否有权限。根据传入的权限标识，查看是否存在于用户的权限标识集合内。
 */
export function hasPermission (perms) {
    
    
  let hasPermission = false;
  let permission = store.state.user.role.rights
  for (let item of permission) {
    
    
    if (item === perms) {
    
    
      hasPermission = true;
      break;
    }
  }
  return hasPermission;
}

在页面中使用按钮时, 先导入这个文件，在methods中写一个方法，然后应用在按钮上

效果和上图是一样的。