后台权限管理

1，页面级权限

通过后台接口控制页面级的权限，将数据保存在本地并且和路由匹配，左侧tabber 仅展示导航到拥有权限的页面。或者使用路由拦截的方式也可以。

2，按钮级权限

超级管理员有所有按钮的权限，普通管理员可能缺少某些按钮的权限，比如编辑和删除等；
此时应该先从接口获取该用户拥有的按钮权限，将所有按钮权限整理到一个对象中，再放入缓存；
整理后如图，key代表页面，value数组对象代表该页面下所有的按钮权限；

按钮级权限封装

仅提供思路，具体做法因个人和业务需求不同而定；

思路：使用vue.directive自定义指令，通过指令输入value(按钮权限的字段)值，再判断该value值是否在上图的数组中，如果不存在通过dom操作删除该标签节点。

注意：在使用v-btn-key的时候尽量不要和v-if冲突，如果业务冲突不得已可以使用v-show，v-if会删除dom 自定义指令再去获取的时候就会报错

permissions.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;
  }
}

引入指令

main.js

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

页面上的指令

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