前言
某个账号登录后,后端会返回给我们该账号对应角色的权限列表,前端需要根据该权限列表动态渲染按钮信息,有权限时显示,没有权限时隐藏。我们可以使用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>
页面呈现效果如下: