Gestión de permisos en segundo plano

1. Permisos a nivel de página

Controle los permisos a nivel de página a través de la interfaz en segundo plano, guarde los datos localmente y haga coincidir la ruta, y la pestaña de la izquierda solo muestra la navegación a la página con permisos. O puede utilizar la intercepción de rutas.

2. Permisos a nivel de botón

El superadministrador tiene los permisos de todos los botones, y los administradores comunes pueden carecer de los permisos de algunos botones, como editar y eliminar;
en este momento, primero debe obtener los permisos de los botones propiedad del usuario desde la interfaz y organizar todos los permisos de botones en un objeto, luego colóquelo en el caché,
después de ordenar, como se muestra en la figura, la clave representa la página y el objeto de matriz de valores representa todos los permisos de botones en la página;

Encapsulación de permisos a nivel de botón

Sólo proporciona ideas y el enfoque específico depende de las necesidades individuales y empresariales;

Idea: use el comando personalizado vue.directive, ingrese el valor (el campo del permiso del botón) a través del comando y luego juzgue si el valor está en la matriz en la figura anterior, y si no existe, elimine la etiqueta nodo a través de la operación DOM.

Nota: Cuando use v-btn-key, intente no entrar en conflicto con v-if. Si hay un conflicto comercial, puede usar v-show, y v-if eliminará el comando personalizado dom y luego obtendrá un error.

permisos.js

import Vue from 'vue';
import route from '../router/index';
// 检测是否有权限
// 使用Vue.directive声明自定义指令btn-key
export const buttonPermissions = Vue.directive('btn-key',{
    
    
  /**
   * inserted：被绑定元素插入父节点时调用
   * el：指令所绑定的元素，可以用来直接操作 DOM
   * binding.value：指令的绑定值，例如：v-my-directive="1 + 1" 中，绑定值为 2。
   */
  inserted(el,binding){
    
    
    let buttonKey = binding.value;
    // 代表某个元素需要通过权限验证
    if(buttonKey){
    
    
      let key = checkKey(buttonKey)
      if(!key){
    
    //没有权限
        el.remove()  //删除按钮
      }
    }else{
    
    
      throw new Error('缺少唯一指令')
    }
  },
})

// 检测传入的元素key是否可以显示
function checkKey(key) {
    
    
  // 获取权限数组
  let permissionData = JSON.parse(sessionStorage.getItem("permissionData")) ? JSON.parse(sessionStorage.getItem("permissionData")) : [] ;
  let nowPage = route.history.current.path.slice(1)
  let lists = permissionData[nowPage]
  // 如果传入的元素key不在权限数组里，则不可显示
  let index = lists.indexOf(key)
  if(index > -1) {
    
    
    return true;
  }else{
    
    
    return false;
  }
}

directiva de importación

principal.js

import {
    
     buttonPermissions } from './utils/permissions'
Vue.use(buttonPermissions)

instrucciones en la pagina

<!-- course_search 是该按钮的权限string -->
<div class="u-flex flex-w w-100" v-btn-key="'course_search'"></div>