前端权限控制方式（二）

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>