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

网络编程 2024/9/1 佚名

3 2 1

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

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

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

菜单权限：

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

标签：

vue-router,权限控制,vue,router,权限,vue,权限控制

免责声明：本站文章均来自网站采集或用户投稿，网站不提供任何软件下载或自行开发的软件！如有用户或公司发现本站内容信息存在侵权行为，请邮件告知！ 858582#qq.com

评论“vue-router 权限控制的示例代码”

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

暂无“vue-router 权限控制的示例代码”评论...

《魔兽世界》大逃杀！60人新游玩模式《强袭风暴》3月21日上线

暴雪近日发布了《魔兽世界》10.2.6 更新内容，新游玩模式《强袭风暴》即将于3月21 日在亚服上线，届时玩家将前往阿拉希高地展开一场 60 人大逃杀对战。

艾泽拉斯的冒险者已经征服了艾泽拉斯的大地及遥远的彼岸。他们在对抗世界上最致命的敌人时展现出过人的手腕，并且成功阻止终结宇宙等级的威胁。当他们在为即将于《魔兽世界》资料片《地心之战》中来袭的萨拉塔斯势力做战斗准备时，他们还需要在熟悉的阿拉希高地面对一个全新的敌人──那就是彼此。在《巨龙崛起》10.2.6 更新的《强袭风暴》中，玩家将会进入一个全新的海盗主题大逃杀式限时活动，其中包含极高的风险和史诗级的奖励。
《强袭风暴》不是普通的战场，作为一个独立于主游戏之外的活动，玩家可以用大逃杀的风格来体验《魔兽世界》，不分职业、不分装备（除了你在赛局中捡到的），光是技巧和战略的强弱之分就能决定出谁才是能坚持到最后的赢家。本次活动将会开放单人和双人模式，玩家在加入海盗主题的预赛大厅区域前，可以从强袭风暴角色画面新增好友。游玩游戏将可以累计名望轨迹，《巨龙崛起》和《魔兽世界：巫妖王之怒经典版》的玩家都可以获得奖励。

更新动态

20240901

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

vue-router,权限控制,vue,router,权限,vue,权限控制

vue router学习之动态路由和嵌套路由详解

react router 4.0以上的路由应用详解

评论“vue-router 权限控制的示例代码”

《魔兽世界》大逃杀！60人新游玩模式《强袭风暴》3月21日上线

更新动态

友情链接