按钮权限设置

在进行后台管理的项时需要对按钮进行权限控制，非admin用户的某些按钮不能进行展示，这该如何开展呢？

首先，权限控制离不开后台的配合，需要后台进行权限的编码

（这个咱也不懂，咱也不敢问）如图就行

按钮权限表

然后就是前端的事情了

1. 第一步需要在登录的时候，将后台返回的菜单权限编码保存起来

//登录接口，获取menuCode
setStorage('btn-code', JSON.stringify(response.data.menuCodes))

2. 可以在 utils 里面写一个公用的方法

// src > utils > validate.js

// 判断字符串里是否包含某个字符串
export function strContainStr(str, val) {
  let flags = false
  if (str.find((n) => n === val)) {
    flags = true
  }
  return flags
}

// 设置按钮权限是否展示
export function btnVisible(item) {
  const arr = JSON.parse(getStorage('btn-code'))
  if (item) {
    if (strContainStr(arr, item)) {
      return true
    }
    return false
  }
}

3. 做好前期的准备工作之后呢，就可以在按钮页面上使用了

• 在对应的页面引入对应的按钮编码以及封装好的方法工具

import { btnVisible } from '../../../utils/validate'
import { SYS_GATEWAY_FRONT_CHANNEL_ADD, SYS_GATEWAY_FRONT_CHANNEL_DEL, SYS_GATEWAY_FRONT_CHANNEL_EDIT } from '../../../utils/btn-config'

• 在 data 中定义一个变量接收对应的按钮编码

data() {
    return {
      addCode: SYS_GATEWAY_FRONT_CHANNEL_ADD,
      delCode: SYS_GATEWAY_FRONT_CHANNEL_DEL,
      editCode: SYS_GATEWAY_FRONT_CHANNEL_EDIT
      }
    }
  },

• 在 methods 下定义一个方法，判断某个按钮编码对应的按钮在该用户下是否可见

isShows(value) {
      return btnVisible(value)
    }

• 最后在按钮上使用 v-if 判断

<template slot-scope="scope">
      <el-button type="text" @click="handleEdit(scope.row)" v-if="isShows(editCode)">修改</el-button>
      <span style="margin: 0 5px;color: #cdd1d5;">|</span>
      <el-button type="text" @click="handleDelete(scope.row)" v-if="isShows(delCode)">删除</el-button>
  </template>

就这样。。。