vue-router 权限控制的示例代码
最近搭建了公司的后台管理系统， 而且系统还比较庞大， 要实现以下几点：
- 菜单权限， 根据不同权限显示不同的菜单
- 操作权限， 比如有些账号没有新增权限， 有些没有修改或者删除权限
- 数据权限， 比如统计概况， 普通管理员不能看到公司营业概况，但能看到自己所属区域的概况
- 显示权限， 比如列表， 运营能看到那一列的签约金额，但市场不能看到签约金额这一列
到目前为止还在构建中， 已经解决菜单权限和操作权限。
菜单权限：
最开始的时候也是按照楼上给出的方法，本地先配置一套路由，然后登陆成功后会从服务器返回一个菜单列表，然后在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);
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
相关文章
路由传参主要有两种方式一种是路径传参一种是参数传递,本文结合示例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友参考下吧2023-11-11
在进行项目开发的时候因为在一个标签上同时使用了v-for和v-if两个指令导致的报错，遇到这个问题如何解决呢？下面小编给大家带来了关于v-if 与 v-for 使用报错问题分析及解决方法，一起看看吧2022-03-03
本文以校验两次密码的一致性应用，给出两个可变属性值的字段之间的联合校验的典型解决方案，通过实例代码给大家介绍Vue 两个字段联合校验之修改密码功能的实现，需要的朋友一起看看吧2021-07-07
这篇文章主要介绍了使用vue打包时gzip压缩的两种方案小结，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-06-06
这篇文章主要介绍了Vue无限滑动周选择日期的组件的示例代码，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-07-07
下面小编就为大家分享一篇Vue2 模板template的四种写法总结，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-02-02
这篇文章主要介绍了vue和better-scroll实现列表左右联动效果，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-04-04
这篇文章主要介绍了解决vue打包后vendor.js文件过大问题，本文给大家介绍的非常详细，具有一定的参考借鉴价值,需要的朋友可以参考下2019-07-07
本文主要介绍了vue结合g6实现树级结构，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2023-06-06
vue3中利用Export2Excel将数据导出为excel表格
这篇文章主要给大家介绍了关于vue3中利用Export2Excel将数据导出为excel表格的相关资料,最近项目需要前端来导出Excel操作,所以给大家总结下,需要的朋友可以参考下2023-09-09
最新评论