未加星标

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

字体大小 | |
[前端(javascript) 所属分类 前端(javascript) | 发布者 店小二04 | 时间 | 作者 红领巾 ] 0人收藏点击收藏

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

菜单权限, 根据不同权限显示不同的菜单
操作权限, 比如有些账号没有新增权限, 有些没有修改或者删除权限
数据权限, 比如统计概况, 普通管理员不能看到公司营业概况,但能看到自己所属区域的概况
显示权限, 比如列表, 运营能看到那一列的签约金额,但市场不能看到签约金额这一列
到目前为止还在构建中, 已经解决菜单权限和操作权限。

菜单权限:

最开始的时候也是按照楼上给出的方法,本地先配置一套路由,然后登陆成功后会从服务器返回一个菜单列表,然后在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);

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

本文前端(javascript)相关术语:javascript是什么意思 javascript下载 javascript权威指南 javascript基础教程 javascript 正则表达式 javascript设计模式 javascript高级程序设计 精通javascript javascript教程

分页:12
转载请注明
本文标题:vue-router 权限控制的示例代码
本站链接:http://www.codesec.net/view/565109.html
分享请点击:


1.凡CodeSecTeam转载的文章,均出自其它媒体或其他官网介绍,目的在于传递更多的信息,并不代表本站赞同其观点和其真实性负责;
2.转载的文章仅代表原创作者观点,与本站无关。其原创性以及文中陈述文字和内容未经本站证实,本站对该文以及其中全部或者部分内容、文字的真实性、完整性、及时性,不作出任何保证或承若;
3.如本站转载稿涉及版权等问题,请作者及时联系本站,我们会及时处理。
登录后可拥有收藏文章、关注作者等权限...
技术大类 技术大类 | 前端(javascript) | 评论(0) | 阅读(120)