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 相关文章推荐
JS动画效果代码3
Apr 03 Javascript
瀑布流布局并自动加载实现代码
Mar 12 Javascript
JavaScript判断密码强度(自写代码)
Sep 06 Javascript
JavaScript1.6数组新特性介绍以及JQuery的几个工具方法
Dec 06 Javascript
javascript获取鼠标点击元素对象(示例代码)
Dec 20 Javascript
js数组操作常用方法
May 08 Javascript
详解JavaScript的流程控制语句
Nov 30 Javascript
微信开发之微信jssdk录音功能开发示例
Oct 22 Javascript
a标签调用js的方法总结
Sep 05 Javascript
详解vue-router 动态路由下子页面多页共活的解决方案
Dec 22 Javascript
javascript设计模式 ? 抽象工厂模式原理与应用实例分析
Apr 09 Javascript
微信小程序完美解决scroll-view高度自适应问题的方法
Aug 08 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为表单获取的URL 地址预设 http 字符串函数代码
2010/05/26 PHP
php读取远程gzip压缩网页的方法
2014/12/29 PHP
PHP获取当前文件的父目录方法汇总
2016/07/21 PHP
php实现文章置顶功能的方法
2016/10/20 PHP
jquery 实现checkbox全选,反选,全不选等功能代码(奇数)
2012/10/24 Javascript
js给页面加style无效果的解决方法
2014/01/20 Javascript
在JavaScript中重写jQuery对象的方法实例教程
2014/08/25 Javascript
JavaScript原生对象之Date对象的属性和方法详解
2015/03/13 Javascript
windows下vue.js开发环境搭建教程
2017/03/20 Javascript
vuejs实现标签选项卡动态更改css样式的方法
2018/05/31 Javascript
在vue中使用jsonp进行跨域请求接口操作
2020/10/29 Javascript
跟老齐学Python之print详解
2014/09/28 Python
使用django-suit为django 1.7 admin后台添加模板
2014/11/18 Python
Python3如何解决字符编码问题详解
2017/04/23 Python
解决Python网页爬虫之中文乱码问题
2018/05/11 Python
Python中整数的缓存机制讲解
2019/02/16 Python
Flask框架请求钩子与request请求对象用法实例分析
2019/11/07 Python
使用Python的networkx绘制精美网络图教程
2019/11/21 Python
Python实现分数序列求和
2020/02/25 Python
python文件路径操作方法总结
2020/12/21 Python
世界最大的海报和艺术印刷商店:AllPosters.com
2017/02/01 全球购物
会计系中文个人求职信
2013/12/24 职场文书
企业军训感言
2014/02/08 职场文书
农民工工资发放承诺书
2014/03/31 职场文书
目标责任书范文
2014/04/14 职场文书
我的长生果教学反思
2014/04/28 职场文书
大气污染防治方案
2014/05/19 职场文书
党员学习中共十八大报告思想汇报
2014/09/15 职场文书
2014年预备党员群众路线教育实践活动对照检查材料思想汇报
2014/10/02 职场文书
四风问题党员个人整改措施
2014/10/27 职场文书
营销经理工作检讨书
2014/11/03 职场文书
公司门卫岗位职责
2015/04/13 职场文书
运动会开幕式新闻稿
2015/07/17 职场文书
《最后一头战象》教学反思
2016/02/16 职场文书
python中sys模块的介绍与实例
2021/04/17 Python
vue中this.$http.post()跨域和请求参数丢失的解决
2022/04/08 Vue.js