最近搭建了公司的后台管理系统, 而且系统还比较庞大, 要实现以下几点:
- 菜单权限, 根据不同权限显示不同的菜单
- 操作权限, 比如有些账号没有新增权限, 有些没有修改或者删除权限
- 数据权限, 比如统计概况, 普通管理员不能看到公司营业概况,但能看到自己所属区域的概况
- 显示权限, 比如列表, 运营能看到那一列的签约金额,但市场不能看到签约金额这一列
到目前为止还在构建中, 已经解决菜单权限和操作权限。
菜单权限:
最开始的时候也是按照楼上给出的方法,本地先配置一套路由,然后登陆成功后会从服务器返回一个菜单列表,然后在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);
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件! 如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
RTX 5090要首发 性能要翻倍!三星展示GDDR7显存
三星在GTC上展示了专为下一代游戏GPU设计的GDDR7内存。
首次推出的GDDR7内存模块密度为16GB,每个模块容量为2GB。其速度预设为32 Gbps(PAM3),但也可以降至28 Gbps,以提高产量和初始阶段的整体性能和成本效益。
据三星表示,GDDR7内存的能效将提高20%,同时工作电压仅为1.1V,低于标准的1.2V。通过采用更新的封装材料和优化的电路设计,使得在高速运行时的发热量降低,GDDR7的热阻比GDDR6降低了70%。
更新日志
- 《暗喻幻想》顺风耳作用介绍
- 崔健1985-梦中的倾诉[再版][WAV+CUE]
- 黄子馨《追星Xin的恋人们2》HQ头版限量编号[WAV+CUE]
- 孟庭苇《情人的眼泪》开盘母带[低速原抓WAV+CUE]
- 孙露《谁为我停留HQCD》[低速原抓WAV+CUE][1.1G]
- 孙悦《时光音乐会》纯银CD[低速原抓WAV+CUE][1.1G]
- 任然《渐晚》[FLAC/分轨][72.32MB]
- 英雄联盟新英雄安蓓萨上线了吗 新英雄安蓓萨技能介绍
- 魔兽世界奥杜尔竞速赛什么时候开启 奥杜尔竞速赛开启时间介绍
- 无畏契约CGRS准星代码多少 CGRS准星代码分享一览
- 张靓颖.2012-倾听【少城时代】【WAV+CUE】
- 游鸿明.1999-五月的雪【大宇国际】【WAV+CUE】
- 曹方.2005-遇见我【钛友文化】【WAV+CUE】
- Unity6引擎上线:稳定性提升、CPU性能最高提升4倍
- 人皇Sky今日举行婚礼!电竞传奇步入新篇章