项目中添加权限校验_h&jjj_校验权限

irpas 02-07 1361

背景:在项目中，通常会给某些模块或者功能添加权限，只有有权限的人才能查看或者操作，本文记录下如何在项目中添加权限位的校验。实现： 1、在页面刷新的时候，通过接口获取当前用户所拥有的权限。在接口正常返回之后，将返回的权限存储到Vuex(也可以自行选择存储方式)中。代码如下：this.$store.commit('SET_AUTHS', "要存储的数据"); 2、在项目中封装权限校验的方法$auth（目录可在src下面的plugin中）

import Vue from 'vue'; Vue.use({ install: function(Vue) { Vue.prototype.$auth = function(powers) { if (!powers) return true; if (typeof powers === 'string') { powers = [powers]; } powers = powers || []; return !!powers.find(item => this.$store.state.session.auths.indexOf(item) > -1); }; // 自定义账户校验方法（例如判断一个账户是不是低级） Vue.prototype.$isLowerAccount = function() { return this.$store.state.session.mem.accountLevel=== 1; }; // 跳转到登录页面 Vue.prototype.$gotologin = function(url) { url = url || '/#/login'; const isProd = process.env.NODE_ENV === 'production'; const loginURL = (isProd ? url : null) || '/#/login'; window.location.href = loginURL; }; } });

注:可以在其中自己添加需要使用的校验方法 3、给模块或功能添加权限校验功能添加权限判断：

<v-list-item v-if="$auth('dept:update')" @click="showGroupEdit(checkedFirstGroup)">重命名</v-list-item>

例如此按钮，直接在上面加上v-if对应的权限位，即可成功实现该功能的权限添加。模块添加权限判断：如果是在菜单上，那么可如下定义菜单：

menus: [ { title: '首页', isHome: true, icon: 'ifHome', iconColor: '#FFF', link: '/', path: '', auth: 'homePage' } ]

在监听到权限存储的变化之后，给权限数组赋值：

watch: { '$store.state.session.auths': { handler() { this.myAuthMenus = JSON.parse(JSON.stringify(this.menus)).filter(item => { if (!item.children) { return this.$auth(item.auth) && (item.client ? this.$isClient(item.client) : true); } item.children = item.children.filter(child => { if (!child.children) { return this.$auth(child.auth) && (child.client ? this.$isClient(child.client) : true); } child.children = child.children.filter(sub => this.$auth(sub.auth) && (sub.client ? this.$isClient(sub.client) : true)); return child.children.length > 0; }); return item.children.length > 0; }); }, immediate: true } },

注：这里的**$isClient**是对环境的判断，如需要可在menus中菜单栏加。至此系统的权限校验生效。对于用户以及权限的获取更新操作，应在每次页面刷新时即去获取，因此应该将操作放在App.vue中进行。