vue2 controls the display and hiding of tab labels through permissions

1 Introduction

1. During the development process, we may encounter a scenario where the content of the tab bar is controlled according to different permissions. At this time, using the custom instruction v-permission cannot achieve the effect we want. It is to change the child of the current node. The element is removed, and the current node still exists, as shown in the figure below.
2. At this time, you need to use v-if to customize the control. The idea is: execute a function in v-if, and the function passes in a permission value. In the function, it is judged whether the permission value belongs to the permission menu and a Boolean value is returned.

<el-tab-pane label="负荷跟踪" name="first" v-permissions="['load_track']">
    <load-tracking ref="loadTrackingRef" :childStationId="childStationId" />
</el-tab-pane>

2. v-if implements custom control

<template>
  <div class="content">
     <el-tabs v-model="activeName" @tab-click="handleClick">
       <el-tab-pane label="负荷跟踪" name="first" v-if="checkPermissionArr(['load_track'])">
         <load-tracking v-if="activeName == 'first'" ref="loadTrackingRef" :childStationId="childStationId" />
       </el-tab-pane>
       <el-tab-pane label="功率跟踪" name="second" v-if="checkPermissionArr(['power_track'])">
         <power-tracking v-if="activeName == 'second'" ref="powerTrackingRef" :childStationId="childStationId" />
       </el-tab-pane>
       <el-tab-pane label="数据曲线分析" name="third" v-if="checkPermissionArr(['data_analysis'])">
         <curve-analysis v-if="activeName == 'third'" ref="curveAnalysisRef"
           :childStationId="childStationId"></curve-analysis>
       </el-tab-pane>
     </el-tabs>
</template>

<script>
import {
    
     checkPermissionArr } from '@/utils/permission' // 权限判断函数

export default{
    
    
   methods: {
    
    
    checkPermissionArr
  }
}
</script>

// src/utils/permission.js
/**
 * 字符权限校验
 * @param {Array} value 校验值
 * @returns {Boolean}
 */
export function checkPermissionArr (value) {
    
    
  if (value && value instanceof Array && value.length > 0) {
    
    
    let permissionIds = store.getters['acl/permission']
    // console.log(permissionIds)
    const permissionArr = value
    const hasPermission = permissionIds.some(permission => {
    
    
      return permissionArr.includes(permission)
    })

    if (!hasPermission) {
    
    
      return false
    }
    return true
  } else {
    
    
    console.error('暂无权限')
    return false
  }
}