vue权限管理系统的实现代码


Posted in Javascript onJanuary 17, 2019

后台管理系统一般都会有权限模块,用来控制用户能访问哪些页面和哪些数据接口。大多数管理系统的页面都长这样。

vue权限管理系统的实现代码

左边为菜单,分为两级,右边为图表显示区域,有增删改查的按钮。

表的结构

SET NAMES utf8mb4;
SET FOREIGN_KEY_CHECKS = 0;

-- ----------------------------
-- Table structure for t_auth_rule
-- ----------------------------
DROP TABLE IF EXISTS `t_auth_rule`;
CREATE TABLE `t_auth_rule` (
 `id_pk` bigint(20) NOT NULL AUTO_INCREMENT,
 `auth_id` varchar(128) NOT NULL COMMENT '权限Id',
 `pauth_id` varchar(128) DEFAULT NULL COMMENT '父级Id',
 `auth_name` varchar(255) NOT NULL COMMENT '权限名称',
 `auth_icon` varchar(255) NOT NULL COMMENT '权限图标',
 `auth_type` smallint(6) NOT NULL COMMENT '权限类型,BIT表示其属性\r\n      0x00表示可显示的菜单权限节点;\r\n      0x01表示普通节点',
 `auth_condition` text COMMENT '条件',
 `remark` varchar(255) DEFAULT NULL COMMENT '备注',
 `is_menu` smallint(255) DEFAULT '0' COMMENT '是否为菜单,0表示非,1表示是',
 `weight` int(11) NOT NULL DEFAULT '0' COMMENT '权重',
 `rule` varchar(256) DEFAULT NULL COMMENT '规则路径主要对应菜单或方法的路径名称',
 `cr_time` timestamp NOT NULL DEFAULT CURRENT_TIMESTAMP COMMENT '创建时间',
 `up_time` timestamp NOT NULL DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP COMMENT '更新时间',
 PRIMARY KEY (`id_pk`),
 UNIQUE KEY `AK_auth_id` (`auth_id`)
) ENGINE=InnoDB AUTO_INCREMENT=264 DEFAULT CHARSET=utf8 COMMENT='权限规则表,记录权限相关的信息,权限以父子关系存在,菜单是权限的一种。';

SET FOREIGN_KEY_CHECKS = 1;


SET NAMES utf8mb4;
SET FOREIGN_KEY_CHECKS = 0;

-- ----------------------------
-- Table structure for t_role_auth
-- ----------------------------
DROP TABLE IF EXISTS `t_role_auth`;
CREATE TABLE `t_role_auth` (
 `id_pk` bigint(20) NOT NULL AUTO_INCREMENT,
 `role_id_fk` varchar(32) DEFAULT NULL COMMENT '角色id',
 `auth_id_fk` varchar(128) DEFAULT NULL COMMENT '权限id',
 `aa` varchar(255) DEFAULT NULL,
 PRIMARY KEY (`id_pk`)
) ENGINE=InnoDB AUTO_INCREMENT=77 DEFAULT CHARSET=utf8 COMMENT='角色与权限的关系表';

SET FOREIGN_KEY_CHECKS = 1;

对于菜单的权限,通过路由表匹配

addRouters(menuMap) {
  let routerArr = [];
  for (let j = 0; j < routerList.length; j++) {
    let obj;
    if (menuMap['AuthRule::' + routerList[j].path]) {   // 找到一级菜单
      obj = {
        path: routerList[j].path,
        component: routerList[j].component,
        redirect: routerList[j].redirect,
        name: routerList[j].name,
        meta: routerList[j].meta,
        children: []
      };

      if (routerList[j].children.length) {
        for (let k = 0; k < routerList[j].children.length; k++) {
          let _fullpath = routerList[j].children[k].path
          if (routerList[j].children[k].meta) {
            _fullpath = routerList[j].children[k].meta.parentPath + '/' + _fullpath 
          }
          if (menuMap['AuthRule::' + _fullpath]) { // 找到二级菜单
            obj.children.push(routerList[j].children[k]);
          }
        }
      }
    }
    if (obj) {
      routerArr.push(obj);
      this.$router.options.routes.push(obj);
    }
  }

  storage.set("routerArr", routerArr);
  this.$router.addRoutes(routerArr);
  this.$router.push({ path: "/" });
},

menuMap为登录时获取的权限菜单,是一个对象; routerList为前端定义的路由表;遍历routerList,如果routerList的key在menuMap里能找到的话,就表示该路由存在。最后生成一个过滤后的路由表,用vue提供的addRoutes方法动态添加到路由中,并把过滤后的路由表存到本地。

const menuMap = {
  '/dashboard': {path: '/dashboard', name: '首页'}
}
const routerList = [
  {path: '/dashboard', name: '首页', component: ..}
]

在页面刷新的时候,从本地获取路由表,添加到路由表中,代码如下,constRouterArr为基础路由表,比如登录,404等

const routerList = storage.get('routerArr')
const routerArr = constRouterArr.concat(routerList);

对于按钮的权限

if (res.data.auth_rule_map) {
  let obj = {}
  Object.keys(res.data.auth_rule_map).forEach(i => {
   // 将所有的按钮放到一个obj里 key 为接口地址 
   if (res.data.auth_rule_map[i].is_menu === 0) { // 如果是按钮
    obj[res.data.auth_rule_map[i].rule] = 1
   }       
  })
  storage.set("btnList", obj);
  storage.set("menuTree", res.data.auth_rule_map);
}

auth_rule_map为接口返回权限map,把按钮的权限过滤出来存到本地。

将map添加到每个路由组件的data里,(这里有一个问题,怎么判断一个组件是否是路由组件),目前想到的是通过组件name来判断,把所有的路由组件放到一个数组里做判断。

在组件内部的按钮上加上v-if,如果this.uri__里的uri在uriMap里存在就显示。

也可以通过方法来判断,如下面的__isBtnShow,不仅可以控制按钮的显示隐藏,还可以控制其样式,比如颜色等,更加灵活,推荐使用方法来控制

uri = {
  ADD_MEMBER: '/api/add_member'
}

export default function install (Vue) {
 const uriMap = storage.get('btnList')
 //uriMap['/admin/api/auth_rule/update_auth_rule.action'] = 1
 Vue.mixin({
  created() {
   const arr = ['MemberManage', 'PayManage', '...']
   if (arr.indexOf(this.$options.name) !== -1) {
    this.dataUri__ = uriMap
    this.uri__ = uri 
   }
  },
  data() {
   return {
    dataUri__: {}
   }
  },
 })
}

<Button v-if="dataUri__[uri__.ADD_MEMBER]">添加会员</Button>

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

Javascript 相关文章推荐
用javascript自动显示最后更新时间
Mar 15 Javascript
JQuery.uploadify 上传文件插件的使用详解 for ASP.NET
Jan 22 Javascript
JSON 数字排序多字段排序介绍
Sep 18 Javascript
js获取当前地址 JS获取当前URL的示例代码
Feb 26 Javascript
js电话号码验证方法
Sep 28 Javascript
jQuery移动端日期(datedropper)和时间(timedropper)选择器附源码下载
Apr 19 Javascript
jquery实现图片切换代码
Oct 13 Javascript
Bootstrap基本样式学习笔记之按钮(4)
Dec 07 Javascript
基于ionic实现下拉刷新功能
May 10 Javascript
JavaScript函数节流和函数去抖知识点学习
Jul 31 Javascript
tsconfig.json配置详解
May 17 Javascript
PHP 502bad gateway原因及解决方案
Nov 13 Javascript
使用nvm和nrm优化node.js工作流的方法
Jan 17 #Javascript
JS使用Prim算法和Kruskal算法实现最小生成树
Jan 17 #Javascript
微信小程序使用wxParse解析html的方法示例
Jan 17 #Javascript
nvm、nrm、npm 安装和使用详解(小结)
Jan 17 #Javascript
JavaScript之实现一个简单的Vue示例
Jan 17 #Javascript
如何能分清npm cnpm npx nvm
Jan 17 #Javascript
JavaScript设计模式之装饰者模式实例详解
Jan 17 #Javascript
You might like
星际流派综述
2020/03/04 星际争霸
php实现比较两个字符串日期大小的方法
2015/05/12 PHP
原生php实现excel文件读写的方法分析
2018/04/25 PHP
JS 字符串连接[性能比较]
2009/05/10 Javascript
Javascript开发之三数组对象实例介绍
2012/11/12 Javascript
XMLHttpRequest处理xml格式的返回数据(示例代码)
2013/11/21 Javascript
jQuery异步获取json数据方法汇总
2014/12/22 Javascript
JavaScript生成随机字符串的方法
2015/03/19 Javascript
图片旋转、鼠标滚轮缩放、镜像、切换图片js代码
2020/12/13 Javascript
vue开发心得和技巧分享
2016/10/27 Javascript
bootstrap模态框关闭后清除模态框的数据方法
2018/08/10 Javascript
JavaScript时间与时间戳的转换操作实例分析
2018/12/07 Javascript
jqGrid表格底部汇总、合计行footerrow处理
2019/08/21 Javascript
Elasticsearch实现复合查询高亮结果功能
2019/09/10 Javascript
js实现时间日期校验
2020/05/26 Javascript
vue3+typeScript穿梭框的实现示例
2020/12/29 Vue.js
[43:03]完美世界DOTA2联赛PWL S2 PXG vs Magma 第二场 11.21
2020/11/24 DOTA
Python实现截屏的函数
2015/07/26 Python
python3.4用函数操作mysql5.7数据库
2017/06/23 Python
python数据结构之列表和元组的详解
2017/09/23 Python
python用户评论标签匹配的解决方法
2018/05/31 Python
Python快速查找list中相同部分的方法
2018/06/27 Python
python Django中models进行模糊查询的示例
2019/07/18 Python
解决Python计算矩阵乘向量,矩阵乘实数的一些小错误
2019/08/26 Python
python3读取autocad图形文件.py实例
2020/06/05 Python
说一下Linux下有关用户和组管理的命令
2016/01/04 面试题
机电一体化大学生求职信
2013/11/08 职场文书
保护环境倡议书
2014/04/14 职场文书
相亲大会策划方案
2014/06/05 职场文书
爬山的活动方案
2014/08/16 职场文书
2015年度培训工作总结范文
2015/04/02 职场文书
高三英语教学反思
2016/03/03 职场文书
班干部竞选演讲稿(精选5篇)
2019/09/24 职场文书
vue中三级导航的菜单权限控制
2021/03/31 Vue.js
解决python存数据库速度太慢的问题
2021/04/23 Python
python中字符串String及其常见操作指南(方法、函数)
2022/04/06 Python