vue-router 权限控制的示例代码
最近搭建了公司的后台管理系统，而且系统还比较庞大，要实现以下几点：
- 菜单权限，根据不同权限显示不同的菜单
- 操作权限，比如有些账号没有新增权限，有些没有修改或者删除权限
- 数据权限，比如统计概况，普通管理员不能看到公司营业概况，但能看到自己所属区域的概况
- 显示权限，比如列表，运营能看到那一列的签约金额，但市场不能看到签约金额这一列
到目前为止还在构建中，已经解决菜单权限和操作权限。
菜单权限：
最开始的时候也是按照楼上给出的方法，本地先配置一套路由，然后登陆成功后会从服务器返回一个菜单列表，然后在beforeEach里面把返回的菜单列表和本地配置的路由进行对比，如果存在则有权限访问。做了几天发现很难用，本地得配置一整套路由，还得做几个页面来把这些路由信息写入到服务器，这样来进行权限分配，当你的权限菜单比较多的时候，像我们这个后台，光公司内部权限就有好几套，还有代理商、商家权限等等，不同的菜单可能会超过几百个，这样配置太累了，还容易出错。
最后的解决思路是完全不在本地做任何路由配置，登录页面单独弄，不放到vue组件里面，登录成功后从后台抓取菜单列表，因为现在是已经登录成功了，所以抓取的就是拥有全新的菜单。抓取成功后在配置到路由里面，然后实例化vue,这样就避免了本地配置一套路由了，完全是服务器上面配置路由。
这样解决的难点只有一个，那就是路由需要对应的组件，所以我们将所有组件存放到一个对象里面，服务器的返回的菜单列表里面，会有一个字段配置组件名，在抓取成功后生成路由配置的时候就使用router[menuName]就能直接加载到这个组件，非常方便。
main.js代码片段：
//实例化Login类并初始化
newLogin(function(err,data){
if(err){
//登录出错
}else{
//登录成功
init(data);
}
}).init();
constinit=function(data){
//先配置路由信息
//componentConfigs是本地的组件配置
letrouters=assignRouter(data.menus,componentConfigs);
//实例化路由
router=newRouter({routes:routers});
//再实例化vue
newVue({
el:'#app',
store,
router,
nprogress,
...App
});
};
componentConfigs.js代码片段：
exportdefault{
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);
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持毛票票。