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 相关文章推荐
jquery自动填充勾选框即把勾选框打上true
Mar 24 Javascript
使用struts2+Ajax+jquery验证用户名是否已被注册
Mar 22 Javascript
JavaScript正则获取地址栏中参数的方法
Mar 02 Javascript
js, jQuery实现全选、反选功能
Mar 08 Javascript
使用jQuery实现购物车结算功能
Aug 15 jQuery
详解基于vue-router的动态权限控制实现方案
Sep 28 Javascript
JS小球抛物线轨迹运动的两种实现方法详解
Dec 20 Javascript
vue、react等单页面项目应该这样子部署到服务器
Jan 03 Javascript
区分vue-router的hash和history模式
Oct 03 Javascript
Vue + ts实现轮播插件的示例
Nov 10 Javascript
基于Vue+Webpack拆分路由文件实现管理
Nov 16 Javascript
NestJs使用Mongoose对MongoDB操作的方法
Feb 22 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
解析php函数method_exists()与is_callable()的区别
2013/06/21 PHP
浅析php中常量,变量的作用域和生存周期
2013/08/10 PHP
Smarty局部缓存的几种方法简介
2014/06/17 PHP
Yii使用CLinkPager分页实例详解
2014/07/23 PHP
PHP中addcslashes与stripcslashes函数用法分析
2016/01/07 PHP
Extjs中常用表单介绍与应用
2010/06/07 Javascript
关于include标签导致js路径找不到的问题分析及解决
2013/07/09 Javascript
clipboard.js无需Flash无需依赖任何JS库实现文本复制与剪切
2015/10/10 Javascript
JavaScript观察者模式(经典)
2015/12/09 Javascript
在JavaScript中模拟类(class)及类的继承关系
2016/05/20 Javascript
详解js中Number()、parseInt()和parseFloat()的区别
2016/12/20 Javascript
js querySelector() 使用方法
2016/12/21 Javascript
js遍历获取表格内数据的方法(必看)
2017/04/06 Javascript
vue时间格式化实例代码
2017/06/13 Javascript
详解前端路由实现与react-router使用姿势
2017/08/07 Javascript
Vue.js 中 axios 跨域访问错误问题及解决方法
2018/11/21 Javascript
vue组件创建的三种方式小结
2020/02/03 Javascript
JS localStorage存储对象,sessionStorage存储数组对象操作示例
2020/02/15 Javascript
es6函数之尾调用优化实例分析
2020/04/25 Javascript
python类型强制转换long to int的代码
2013/02/10 Python
Python正则表达式实现简易计算器功能示例
2019/05/07 Python
Python函数默认参数常见问题及解决方案
2020/03/26 Python
python 安装移动复制第三方库操作
2020/07/13 Python
python可视化 matplotlib画图使用colorbar工具自定义颜色
2020/12/07 Python
Python如何实现Paramiko的二次封装
2021/01/30 Python
IE8下CSS3选择器nth-child() 不兼容问题的解决方法
2016/11/16 HTML / CSS
营销与策划个人求职信
2013/09/22 职场文书
大一学生假期实习的自我评价
2013/10/12 职场文书
轻金属冶金专业毕业生自荐信
2013/11/02 职场文书
《富饶的西沙群岛》教学反思
2014/04/09 职场文书
医学专业大学生求职信
2014/07/12 职场文书
老人再婚离婚协议书范本
2014/10/27 职场文书
2014年依法行政工作总结
2014/11/19 职场文书
大学教师个人总结
2015/02/10 职场文书
2015学生会文艺部工作总结
2015/04/03 职场文书
2016高三毕业赠言寄语
2015/12/04 职场文书