vue-router 权限控制的示例代码

最近搭建了公司的后台管理系统， 而且系统还比较庞大， 要实现以下几点：

• 菜单权限， 根据不同权限显示不同的菜单
• 操作权限， 比如有些账号没有新增权限， 有些没有修改或者删除权限
• 数据权限， 比如统计概况， 普通管理员不能看到公司营业概况，但能看到自己所属区域的概况
• 显示权限， 比如列表， 运营能看到那一列的签约金额，但市场不能看到签约金额这一列

到目前为止还在构建中， 已经解决菜单权限和操作权限。

菜单权限：

最开始的时候也是按照楼上给出的方法，本地先配置一套路由，然后登陆成功后会从服务器返回一个菜单列表，然后在beforeEach里面把返回的菜单列表和本地配置的路由进行对比， 如果存在则有权限访问。 做了几天发现很难用， 本地得配置一整套路由，还得做几个页面来把这些路由信息写入到服务器，这样来进行权限分配， 当你的权限菜单比较多的时候， 像我们这个后台，光公司内部权限就有好几套， 还有代理商、商家权限等等， 不同的菜单可能会超过几百个， 这样配置太累了，还容易出错。

最后的解决思路是完全不在本地做任何路由配置， 登录页面单独弄，不放到vue组件里面， 登录成功后从后台抓取菜单列表， 因为现在是已经登录成功了，所以抓取的就是拥有全新的菜单。 抓取成功后在配置到路由里面，然后实例化vue,这样就避免了本地配置一套路由了，完全是服务器上面配置路由。

这样解决的难点只有一个，那就是路由需要对应的组件，所以我们将所有组件存放到一个对象里面， 服务器的返回的菜单列表里面，会有一个字段配置组件名， 在抓取成功后生成路由配置的时候就使用 router[menuName]就能直接加载到这个组件，非常方便。

main.js代码片段：

componentConfigs.js 代码片段：

服务器返回的菜单json:

其中meta 字段里面是当前路由里的操作权限

菜单的权限大概就是这样， 至于操作权限， 思路是这样的： 写一个鉴权的vue插件， 然后所有的操作独立放到methods里面; 然后所有的操作 @click里面调用鉴权函数， $auth('add',arg1,arg2,...argN) ; $auth里面判断this.$route.meta 里是否有权限进行这个操作， 如果有则调用 this[authName].apply(null,arg);

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持编程之家。

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!