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

2019-11-19 15:20:30

字体：大中小

来源：转载

供稿：网友

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

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

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

菜单权限：

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

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

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

main.js代码片段：

// 实例化Login类并初始化 new Login(function (err, data) {  if (err) {   // 登录出错  } else {   // 登录成功   init(data);  } }).init();const init = function (data) { // 先配置路由信息 // componentConfigs 是本地的组件配置 let routers = assignRouter(data.menus, componentConfigs); // 实例化路由 router = new Router({routes: routers}); // 再实例化vue new Vue({  el: '#app',  store,  router,  nprogress,  ...App });};

componentConfigs.js 代码片段：

export default { Common: {  Admin: require('../../vue/pages/common/Admin'),  Index: require('../../vue/pages/common/Index'),  UpdatePassword: r => require.ensure([], () => r(require('../../vue/pages/users/UpdatePassword')), 'users') }}

服务器返回的菜单json:

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

[{      "path": "//admin//index",      "name": "/u9996/u9875",      "component": "Common.Index",      "display": true,      "icon": "icon-home"    }, {      "path": "//admin//updatePassword",      "name": "/u4fee/u6539/u5bc6/u7801",      "component": "Common.UpdatePassword",      "display": false    }, {      "path": "//admin//commodity",      "name": "/u5546/u54c1/u7ba1/u7406",      "component": "Content",      "display": true,      "icon": "icon-class",      "children": [{        "path": "//admin//commodity//publicWarehouse",        "name": "/u516c/u5171/u5e93/u7ba1/u7406",        "component": "Commodity.PublicWarehouse",        "display": true,        "meta": {"handleAuth": {"add": true, "edit": false, "del": true}}      }, {        "path": "//admin//commodity//businessesWarehouse",        "name": "/u5546/u5bb6/u5e93/u7ba1/u7406",        "component": "Commodity.BusinessesWarehouse",        "display": true,        "meta": {"handleAuth": {"add": true, "edit": false, "del": true}}      }]    }]

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

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

上一篇：vue router学习之动态路由和嵌套路由详解

下一篇：react router 4.0以上的路由应用详解