前端权限控制方式(二)
1、 菜单权限控制
1) 路由守卫控制路由访问
router.beforeEach((to, from, next) => {
//权限校验
let pass = valid(to.name);
if(!pass){
return console.log('无权访问');
}
next();
});
valid方法的实现:
定义一个文件routerPermissions.js,映射所有的路由名和权限名,可能多个路由名对应一个权限名。
export default {
“ContentNav”: “management”, //管理中心
}
Valid方法根据to.name路由名查询到对应的权限名,然后到用户的权限列表中查询是否存在:存在则通过,不存在则不通过。
2) 菜单显示控制
在每个菜单项中加上v-if=”valid(路由名)”
在每个菜单项中使用路由对象取代path,这样可以取到路由名。
2、 按钮权限控制
定义自定义指令has,其参数为权限名。
Vue.directive('has', {
bind: function (el, binding) {
if(!has(binding.value)){
el.parentNode.removeChild(el);
}
}
});
//用法:
<btn v-has='requirement.view'>按钮</btn>