前端朋友遇到项目中的一个问题，就是需要根据后台接口返回的数据，来判断当前用户的操作权限。比如有删除权限，就显示对应的删除按钮，没有这个权限，就置为不可点击状态，或者就是直接隐藏。
作为一个后台开发工作者来讲，对于前端的一个技术，涉猎并不是很深，只能通过官方文档或者百度先简单了解下。经过一系列的调查 得知，想实现这么一个功能，比较简单的就是使用VUE中的状态管理（有没有其他更好的方法，暂时还不知道），一些基本的东西我还知道点。状态管理？ 只听过，没用过。经过一段时间的调查 测试，终于实现了基于状态管理 按钮级别的权限控制。
先看下不同权限在页面上的显示情况，为了更好的表示，此事例对于没有权限的按钮采用禁用的方式。
没有删除权限的时候，页面按钮显示如下 有删除权限的时候，页面按钮显示如下
接下来看具体的实现步骤：
1、首先在src目录下创建 store 文件夹，然后在 store 文件加下创建 index.js 文件，index.js内容如下：
// 导入 vueimport Vue from 'vue'// 导入 vueximport Vuex from 'vuex'// 使用vuexVue.use(Vuex);//创建vue实例const store = new Vuex.Store({state:{// 设置属性，用于保存后台接口返回的权限数据permission:[]}})//导出storeexport default store
2、然后在 main.js 中导入 store/index.js 文以供全局使用
import Vue from 'vue'import store from './store/index.js'Vue.config.productionTip = false;new Vue({store,render: h => h(App)}).$mount('#app')
3、此时我们已经把需要的东西准备好了，那么如何将接口中获取的数据存到store中呢？接下来就要开始修改 store/index.js 文件：
import Vue from 'vue'import Vuex from 'vuex'// 使用vuexVue.use(Vuex);//创建vue实例const store = new Vuex.Store({state:{permission:[]},mutations:{SET_PERMISSION(state,permission){//permission 为传入的权限标识集合// 传入的权限集合 赋值给状态中的 permissionstate.permission = permission;}},actions:{// 官方不推荐直接修改mutation， 可使用actions来提交 mutationSET_PERMISSION(context,permission){// 提交到 mutation 中的 SET_PERMISSION 函数mit("SET_PERMISSION",permission);}}})//导出storeexport default store
4、接下来我就该把从接口获取的数据提交到状态管理中，因为只做为测试，所以没有真正的接口，此处使用模拟数据代替，具体如下：
methods:{getPermission(){ // 模拟接口 获取 权限数据集合// 模拟获取的数据 有以下几个权限let perms = ['search','view','edit','delete'];// 用于把权限集合提交到 actions 中的 SET_PERMISSION 函数// 第一个为函数名，后面的参数为 我们需要提交的参数，可以是多个this.$store.dispatch("SET_PERMISSION",perms);}}
截止到此，我们已经完成了权限的存储。接下来就该如何使用我们存在store中的权限集合来控制按钮的是否可用。
5、首先我们创建 src/permission/index.js 文件 index.js 文件用于判断 按钮所需要的权限是否存在与 store 中，内容如下：
import store from '@/store/index.js'/*** 判断是否有权限。根据传入的权限标识，查看是否存在于用户的权限标识集合内。*/export function hasPermission (perms) {let hasPermission = false;let permission = store.state.permission;for (var i = 0; i < permission.length; i++) {if(permission[i] === perms){hasPermission = true;break;}}return hasPermission;}
6、为了更好的实现功能，我们创建一个按钮组件，所有需要权限控制的按钮我们都用这个组件来替代，创建文件 src/permission/ktButton.vue 内容如下：
<template><el-button :size="size" :type="type" :loading="loading" :disabled="!hasPerms(perms)" @click="handleClick">{{label}}</el-button></template><script>// 禁用标识// :disabled="!hasPerms(perms)"import { hasPermission } from '@/permission/index.js'export default {name: 'KtButton',props: {label: { // 按钮显示文本type: String,default: 'Button'},size: { // 按钮尺寸type: String,default: 'mini'},type: { // 按钮类型type: String,default: null},loading: { // 按钮加载标识type: Boolean,default: false},disabled: { // 按钮是否禁用type: Boolean,default: false},perms: { // 按钮权限标识，外部使用者传入type: String,default: null}},data() {return {}},methods: {handleClick: function () {// 按钮操作处理函数this.$emit('click', {})}, hasPerms: function (perms) {// 根据权限标识和外部指示状态进行权限判断return hasPermission(perms) //& !this.disabled}},mounted() {}}</script>
以上内容中 props 为传值问题，需要什么属性 可自行添加，关于父子组件的传值可参考另一篇博文VUE脚手架搭建+Element 组件库table
对于没有权限的按钮是需要不可点击 还是 隐藏状态，只需要把 :disabled 换成 v-if 即可。由于我们的权限不仅限于一个页面，所以需要我们把按钮组件注册到全局，以便其他页面直接使用 而无需再次引入。在 main.js 添加以下内容 ：
// 按钮组件 全局使用import KtButton from '@/permission/ktButton.vue'ponent("KtButton",KtButton);
7、接下来我们就可以直接在需要进行权限控制的页面直接使用 该组件，如 我在 UserList 页面的操作栏使用：
首先在操作栏 添加相应的 按钮 及权限标识
<el-table-column label="操作" width="360"><template slot-scope="scope"><KtButton size="mini" @click="handleSelect(scope.$index,scope.row)" label='查看' perms='view' type="primary"/> <KtButton size="mini" @click="handleUpdate(scope.$index,scope.row)" label='编辑' perms='edit' type="primary"/> <KtButton size="mini" @click="handleDelete(scope.$index,scope.row)" label='删除' perms='delete' type="danger"/> </template></el-table-column>
以上 perms 为该按钮 对应的权限标识。由于在 按钮组件中 有一个函数hasPerms 来判断 是否有权限，所以我们需要在此页面上添加此方法，传入对应的权限标识来判断是否有此权限。
methods:{hasPerms: function (perms) {// 根据权限标识和外部指示状态进行权限判断return hasPermission(perms) },getPermission(){ // 模拟接口 获取 权限数据集合let perms = ['search','view','edit','delete'];this.$store.dispatch("SET_PERMISSION",perms);}}
此处的 perms 参数 就是 按钮组件中的 perms='edit' 中的 edit 。那么接下来我们看看页面效果：
由于 之前设置的 权限 是全都有的，所以现在看到的是全部都是可以点击的状态。那么接下来 我们试一下把模拟接口获取的权限集合只保留编辑，操作如下：
getPermission(){ // 模拟接口 获取 权限数据集合let perms = ['edit'];this.$store.dispatch("SET_PERMISSION",perms);},
此时我们再来看看 按钮的状态：
可以看到 我把 查看、删除及搜索的权限全都去掉之后，刷新页面 这三个按钮全都边为了不可点击的状态。说明我们需要实现的按钮权限已经实现。
实现起来还是挺简单的，但是实现的过程却不简单。所以在遇到问题的时候一定要多查阅资料，才能更好的帮助我们解决问题！！！
