administración de permisos de vue --- ¿cómo escribir permisos de botones?

1. Descripción del problema

Todos sabemos que hay cuatro aspectos principales del control de permisos de front-end.
1、菜单的控制

En la solicitud de inicio de sesión, se obtendrán los datos de permiso (es posible que el backend devuelva una ruta completa, o solo devuelva una matriz de rutas, y el frontend puede escribir el código correspondiente según la situación). Esto requiere la soporte de datos devuelto por el backend.Permiso de datos, mostrar el menú correspondiente, haga clic en el menú para ver la interfaz correspondiente

2、界面的控制

Si el usuario no ha iniciado sesión e ingresa manualmente la dirección de la interfaz de administración en la barra de direcciones, debe saltar a la interfaz de inicio de sesión. Si el usuario ya ha iniciado sesión, pero ingresa manualmente la dirección que no está autorizada, debe para saltar a la interfaz 404.

3、按钮的控制

En la interfaz de un determinado menú, es necesario mostrar botones que se pueden operar de acuerdo con los datos de permiso, como agregar, eliminar, modificar, ver

4、请求和响应控制

Si el usuario convierte algunos botones deshabilitados en un estado habilitado a través de operaciones no convencionales, como a través de herramientas de depuración del navegador, la solicitud enviada en este momento también debe ser interceptada por el front-end.

Este artículo presenta principalmente cómo implementar el control de permisos del botón.

2. Método 1

El primero es obtener los datos. En segundo plano, generalmente se realiza el control de permisos, que consiste en obtener los datos correspondientes según el usuario. Aquí obtengo la matriz de permisos devuelta iniciando sesión y luego la guardo en el estado en vuex , como se muestra en la siguiente figura, este usuario solo puede eliminar permisos

Instrucciones personalizadas para determinar si se muestra el botón, cree un archivo 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)
      }
    }
  }
})

Cuando use botones en la página, use la directiva v-premission personalizada

Como se muestra en la figura a continuación, hay dos botones, un botón de edición y un botón de eliminación, pero el permiso devuelto anteriormente es solo el permiso de eliminación. De acuerdo con el código de la figura a continuación, en este momento, deberíamos poder ver en la página que el botón editar está deshabilitado, disponible cuando se elimina el botón.

El efecto final

Nota: En vue3, el uso es diferente

archivo de permiso.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)
	      }
    	}
   }
})

3. Método 2

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

El primero es obtener los datos. En segundo plano, generalmente se realiza el control de permisos, que consiste en obtener los datos correspondientes según el usuario. Aquí obtengo la matriz de permisos devuelta iniciando sesión y luego la guardo en el estado en vuex , como se muestra en la siguiente figura, este usuario solo puede eliminar permisos

Cree una función para determinar si se muestra el botón, cree un archivo 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;
}

Cuando use un botón en una página, primero importe este archivo, escriba un método en métodos y luego aplíquelo al botón

El efecto es el mismo que en la imagen de arriba.