基于Vue实现后台系统权限控制的示例代码

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

权限控制是什么

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

Vue菜单权限控制

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

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

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

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

//main.jslet 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的菜单组件实现，代码大致是这样的：