本篇文章主要介绍了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);

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

最新资讯
元气森林唐彬森,陆正耀的新“门徒”?

元气森林唐彬森,陆正耀

“谎言的最高境界是什么?就是你说的每一句话都是真话,但
微软在云数据服务领域挑战亚马逊、Snowflake

微软在云数据服务领域

微软公司推出了一款新的分析工具Azure Synapse,同时也
中芯国际:中芯控股、国家集成电路基金II和亦庄国投成立合资企业

中芯国际:中芯控股、国

中芯国际公告称,中芯控股、国家集成电路基金II和亦庄国
中国移动黄宇红:空天地一体化发展已成为6G共识

中国移动黄宇红:空天地

中国移动研究院副院长黄宇红表示,当前,空天地一体化发展
Deliveroo CEO:疫情让外卖行业普及速度加快2到3年

Deliveroo CEO:疫情让

英国外卖平台Deliveroo CEO威尔·舒(Will Shu)今日表示,
富瑞维持美团股票“买入”评级 目标股价360港元

富瑞维持美团股票“买

投资银行富瑞(Jefferies )今日发布投资研究报告,维持美团
最新文章
详解Vue的ref特性的使用

详解Vue的ref特性的使

这篇文章主要介绍了详解Vue的ref特性的使用,文中通过
vue学习笔记之slot插槽基本用法实例分析

vue学习笔记之slot插

这篇文章主要介绍了vue学习笔记之slot插槽基本用法,结
vue跳转方式(打开新页面)及传参操作示例

vue跳转方式(打开新页

这篇文章主要介绍了vue跳转方式(打开新页面)及传参操作,
vue学习笔记之过滤器的基本使用方法实例分析

vue学习笔记之过滤器

这篇文章主要介绍了vue学习笔记之过滤器的基本使用方
js获取本日、本周、本月的时间代码

js获取本日、本周、本

本篇文章给大家分享的内容是利用js如何获取本日、本周
node crawler如何添加promise支持

node crawler如何添加

这篇文章主要介绍了node crawler如何添加promise支持,