基于Vue实现后台系统权限控制

时间 2019-11-17

标签基于 vue 实现后台系统权限控制繁體版

原文原文链接

原文地址：http://refined-x.com/2017/08/29/基于Vue实现后台系统权限控制/，转载请注明出处。html

用Vue这类双向绑定框架作后台系统再适合不过，后台系统相比普通前端项目除了数据交互更频繁之外，还有一个特别的需求就是对用户的权限控制，那么如何在一个Vue应用中实现权限控制呢？下面是个人一点经验。前端

权限控制是什么

在权限的世界里服务端提供的一切都是资源，资源能够由请求方法+请求地址来描述，权限是对特定资源的访问许可，所谓权限控制，也就是确保用户只能访问到被分配的资源。具体的说，前端对资源的访问一般是由界面上的按钮发起，好比删除某条数据；或由用户进入某一个页面发起，好比获取某个列表数据。这两种形式覆盖了资源请求的大部分场景，所以权限控制也能够被笼统的分红菜单权限控制和按钮权限控制。ios

Vue菜单权限控制

菜单是对路由的直接体现，菜单控制实际上就是路由控制。实现路由控制一个简单的方式是，在路由的before钩子里校验当前即将跳转的路由地址是否有权访问，根据校验结果决定路由是否放行，伪码：git

router.beforeEach((to, from, next) => {
 //权限校验
 let pass = valid(to);
 if(!pass){
 return console.log('无权访问');
 }
 next();
});

这种实现方式既简单又直观，用于简单的系统很是合适，但这么作本质上是将全部路由所有注册了，直接带来的缺点有两个：1、若是路由组件不是按需加载的话，应用将加载大量冗余代码；2、每次跳转都要遍历一次完整路由是对计算能力的浪费，对于路由总数较大的应用很不可取。github

理想的实现方式是本地保存完整路由，但并不当即初始化Vue应用，待用户登陆拿到权限后，用菜单权限筛选出可用路由，再用可用路由初始化Vue应用。也就是说，要将登陆页独立出去作成一个单独的页面，登陆后将用户数据保存在本地，再经过url跳转到Vue应用所在页面，Vue应用启动前经过本地用户数据完成路由筛选，而后初始化Vue应用，伪码以下：element-ui

//main.js
let user = sessionStorage.getItem('user');
if (user) {
 user = JSON.parse(user);
 //筛选获得实际路由
 let fullPath = require('fullPath.js');
 let routes = filter(fullPath, user.menus);
 //建立路由对象
 let router = new Router({routes});
 //生成Vue实例
 new Vue({
 el: '#app',
 router,
 render: h => h(App)
 });
}else{
 location.href = '/login/';
}

这样咱们就根据用户权限生成了一套”定制”路由，这时咱们还但愿能直接用路由生成导航菜单，常规的路由数据可能没法知足菜单组件的需求，因此咱们能够事先在路由的meta数据里维护上菜单数据，好比菜单名称菜单图标等，只要在模板中经过$router.options就能够访问到当前路由数据，若是使用element-ui的菜单组件实现，代码大体是这样的：axios

<el-menu router>
 <el-menu-item v-for="(route, index) in $router.options.routes[2].children"
 :route="route"
 :index="route.name">
 <i class="ion" v-html="route.icon"></i>{{route.name}}
 </el-menu-item>
</el-menu>

固然这样只能循环出一级菜单，若是还有二级路由须要对应二级菜单的话，就得判断并循环children节点，比较简单就不放更多代码了，菜单权限控制到这里就完成了。api

Vue按钮权限控制

按钮权限控制与菜单权限控制的实现思路相似，也是根据用户权限判断各个按钮的显示与否，方式无非是v-if或自定义指令，并且只要将v-if背后的权限校验逻辑抽象成方法，不管是代码量仍是使用形式上都跟自定义指令几乎同样，但v-if的特色是它会响应数据变化，所以随着应用的运行会频繁触发权限校验，而权限在应用的整个生命周期内其实只需校验一次，为了不无谓的程序执行，这里能够用自定义指令来实现，伪码:数组

Vue.directive('has', {
 bind: function (el, binding) {
 if(!has(binding.value)){
 el.parentNode.removeChild(el);
 }
 }
});

//用法：
<btn v-has='get,/sources'>按钮</btn>

注意在指令bind回调里有一个has()方法，这就是权限校验方法，咱们同时将这个方法全局混合到Vue对象中，使应用里的每一个组件均可以访问到这个方法，便于为界面上的v-if提供支持，例如：session

1
2
3

<div v-if="has('get,/sources') && something">
 一个须要同时具有'get,/sources'权限和somthing为真值才显示的div
</div>

这样一来凡是须要依据权限实现的按钮显隐控制和界面变化均可以很方便的实现。

但按钮权限控制真正麻烦的地方不在于如何实现，而在于高昂的维护成本。咱们假设按钮Btn绑定了点击回调Fn，回调Fn里发起了请求Req，请求Req须要某个资源的访问权限，最终你要根据用户是否拥有Req的权限，决定Btn是否显示，而Req跟Btn之间并无直接关联，因此咱们就要人肉维护他们的关系，一个复杂项目里的按钮有个几十上百都很正常，随着业务的变动去维护这么多按钮的权限，想一想都头疼。

有一个方法能够绕开这个烂摊子，那就是前端放弃对视图层的控制，退到请求层面，在请求发起前集中拦截，这时能够直接根据请求方法和请求地址来校验权限，除了实现一个拦截器以外不须要额外的代码，能够说很是优雅了。以axios为例，拦截器大概长这样：

axios.interceptors.request.use(function (config) {
 if(!has(config)){
 //验证不经过
 return Promise.reject({
 message: `no permission`
 });
 }
 return config;
});

但若是仅仅这样作权限控制，界面上将显示出全部的按钮，用户看到的按钮却不必定能够点击，这种体验我认为只能停留在理论层面，根本没法应用到实际产品中。请求控制能够做为整个控制体系的第二道防线，或某些特殊状况下的辅助手段，最终仍是要回到按钮控制的思路上来。

那么怎样能尽量方便的采集到每一个按钮所需的权限呢？按钮和权限之间隔着两层东西，第一层是click回调，第二层是回调里的AJAX请求，不想人肉维护就得想办法突破这两层隔阂，让按钮和权限产生联系，按钮必然要绑定click事件，最理想的采集方式是在绑定事件的同时获得所需权限，让一切天然而然的发生，好比这样，

1	<btn v-do="Fn">按钮</btn>

若是Fn能以某种形式采集到内部的AJAX请求参数，并转化成权限信息传递出来就完美了，然而我没找到可行的方法，而且这种形式在应用上也存在缺陷，由于不必定每一个操做按钮都会发起AJAX请求，好比编辑按钮自己并不会触发请求，真正触发请求的是另外一个保存按钮，因此这个思路只是看起来很美。

那么退而求其次的作法是让按钮和请求联系起来，好比说按钮涉及一个名称为A的请求，那么我但愿权限指令能够这样写，

1	<btn v-has="A" @click="Fn">按钮</btn>

比完美形态是差了很多，但起码不须要手动维护到'get,/resources'这个级别了，这里对A的实现能够有多种形式，好比A能够是一个包含两个属性的对象：

const A = {
 p: ['put,/menu/**'],
 r: params => {
 return axios.put(`/menu/${params.id}`, params)
 }
};

//用做权限：
<btn v-has="[A]" @click="Fn">按钮</btn>
//用做请求：
function Fn(){
 A.r().then((res) => {})
}

一般咱们会将项目里全部的api放在一个api模块里集中管理，在写api时顺便就把权限给维护了，换来的是在组件界面里能够直接用请求名称来描述权限，而不须要来回奔波于界面和api模块之间，必定程度上实现了关注点分离，并且has指令还能够进一步作优化，例如参数只须要接收A，指令内部根据约定自动访问A.p来获取权限，还能够接收数组，容许多个权限联合校验。

后记

好了，这就是我对前端权限控制的一些实践和思考，若有不当欢迎指正。

上述方案已开源，项目地址：Vue-Access-Control