背景:在项目中,通常会给某些模块或者功能添加权限,只有有权限的人才能查看或者操作,本文记录下如何在项目中添加权限位的校验。
实现:
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中进行。