使用vuex实现控制按钮权限控制

前言

某个账号登录后，后端会返回给我们该账号对应角色的权限列表，前端需要根据该权限列表动态渲染按钮信息，有权限时显示，没有权限时隐藏。我们可以使用vuex实现这个功能，下面是具体步骤：

步骤一：在store目录中创建以下文件

// user.js文件

import { getButtons } from '@/api/user'
const user = {
    state: {
        permission: window.localStorage.getItem('permission') || {},
    },
    actions: {
        //获取系统按钮
        GetButtons({commit}) {
            // 调用接口获取按钮权限（后端返回数据如下）
            // let data = [{
            //     "id": "1548922426016485378",
            //     "parentId": "1539057916654469122",
            //     "code": "btn",
            //     "children": [
            //         {
            //             "id": "1641075595696345089",
            //             "parentId": "1548922426016485378",
            //             "code": "primary_btn",
            //         },
            //         {
            //             "id": "1641075595700539394",
            //             "parentId": "1548922426016485378",
            //             "code": "success_btn",
            //         },
            //         {
            //             "id": "1641075595700539395",
            //             "parentId": "1548922426016485378",
            //             "code": "info_btn",
            //         },
            //         {
            //             "id": "1641075595704733698",
            //             "parentId": "1548922426016485378",
            //             "code": "warning_btn",
            //         }
            //     ],
            //     "hasChildren": false,
            // }]
            return new Promise((resolve) => {
                getButtons().then(res => {
                    const data = res.data.data;
                    commit('SET_PERMISSION', data);
                    resolve();
                })
            })
        },
    },
    mutations: {
        SET_PERMISSION: (state, permission) => {
            let result = [];

            function getCode(list) {
                list.forEach(ele => {
                    if (typeof (ele) === 'object') {
                        const chiildren = ele.children;
                        const code = ele.code;
                        if (chiildren) {
                            getCode(chiildren)
                        } else {
                            result.push(code);
                        }
                    }
                })
            }

            getCode(permission);
            state.permission = {};
            result.forEach(ele => {
                state.permission[ele] = true;
            });
            window.localStorage.setItem(permission, JSON.stringify(state.permission))
        }
    }

}
export default user



// getters.js 文件

const getters = {
    permission: state => state.user.permission
}
export default getters



// store/index.js 文件

import Vue from 'vue'
import Vuex from 'vuex'
import user from './modules/user'
import getters from "./getters";

Vue.use(Vuex)

export default new Vuex.Store({
  state: {
  },
  mutations: {
  },
  actions: {
  },
  modules: {
    user
  },
  getters,
})

步骤二：在登录后调用接口获取按钮数据权限

this.$store.dispatch("GetButtons")

步骤三：在页面中使用：

使用v-if 判断permission中该按钮的值是否为true控制按钮显示与隐藏

<template>
  <div class="home">
    <img alt="Vue logo" src="../assets/logo.png">
    <el-row>
      <el-button type="primary" plain v-if="permission.primary_btn">主要按钮</el-button>
      <el-button type="success" plain v-if="permission.success_btn">成功按钮</el-button>
      <el-button type="info" plain v-if="permission.info_btn">信息按钮</el-button>
      <el-button type="warning" plain v-if="permission.warning_btn">警告按钮</el-button>
      <el-button type="danger" plain v-if="permission.danger_btn">危险按钮</el-button>
    </el-row>
  </div>
</template>

<script>
import {mapGetters} from "vuex";
export default {
  name: 'Home',
  data(){
    return{

    }
  },
  computed: {
    ...mapGetters(["permission"]),
  },
  created() {
    
  },
  methods:{
    
  }
}
</script>

页面呈现效果如下：