考勤理系统户角色权限理设计实现
考勤理系统户角色权限设计实现
摘
互联网信息技术急速发展新时代基微信程序二维码定位等功设计利二维码定位功进行签考勤理系统考勤理员设置签点范围系统提供导出理户考勤信息功请假申请功假期理功等文重点讲述该系统户角色权限设计实现权限模块系统权限进行设计实现redis缓存优化系统增强系统性
关键词：考勤理系统户角色权限设计Redis
Design and Implementation of User Role and Authority in Time Attendance Management System
Abstract
In the new era of rapid development of Internet information technology based on the WeChat applet＇s QR code and positioning functions we have designed an attendance management system that can use the QR code and positioning functions to check in And the scope and the system provides the function of exporting and managing user＇s attendance information leave application function vacation management function etc This article focuses on the design and implementation of the system＇s user roles and permissions that is the permission module which designs and implements system permissions optimizes the system using redis cache and enhances system performance
Keywords Time and Attendance Management SystemDesign of user roles and permissionsRedis
目 录
1 前言 6
2相关技术介绍 6
21 前端技术介绍 7
22 Java介绍 8
23 台项目架构介绍 8
24 技术架构图 10
3系统介绍 10
31 系统设计功结构 10
32 系统模块介绍 12
321权限理模块 12
322考勤统计模块 12
323审批模块 13
33 系统例图 14
4权限模块设计实现 14
41 权限模块设计 14
42 权限模块实现 16
5测试 20
51 登录功测试 20
52 角色增删改查功测试 21
53 员工增删改查功测试 22
53 角色户权限控制测试 23
6微信程序界面 25
7结 27
附录1 28
1 前言
考勤理系统基微信程序二维码定位等功实现公司进行考勤理系统系统支持二维码定位口令签什选择微信程序呢仅仅微信户量微信程序便捷需重新载软件占存等优点托微信程序便捷应环境开发考勤理系统考勤理系统分成程序端web端程序端公司员工考勤web端支持考勤数统计审批流程理考勤规设置公司员工理考勤理系统分成权限理模块考勤统计模块审批模块三模块文重点研究考勤理系统权限理模块具体分析系统中户角色权限关系进行梳理设计程中前端实现进行交融页面查权限进行抽取单独建立路表权限页面进行划分分关联应页面具体设计实现文面部分出
2相关技术介绍
21 前端技术介绍
需求引入需第三方库VueMVVM模式框架MVVMModelViewViewModel数层dom层(户界面层)中间层（处理数界面）MVVM模式提供数双绑定分离视图（View）模型（Model）降低代码耦合提高重性Vuejs20版引入虚拟DOM初始渲染速度幅度提升降低存消耗Vue官方甚React做实验结果出Vue渲染优React年Vuejs越越国Vuejs已Reactjs更
VuerouterVuejs 官方路理器适构建SPA(单页应程序)SPA传统应程序区传统应程序切换页面会重新请求服务器获取新完整页面SPA会第次请求加载页面次请求 仅仅获取必数然 页面中js解析获取数 展示页面中SPA核心：更新视图重新请求页面样产生缺点果端做服务器渲染会导致单页面应爬取数SEO友VuerouterSPA路路质建立起URL页面间映射关系Vue说建立URL组件间映射关系Vuerouter实现SPA路时提供两种方式：hash模式history模式hash模式 URL hash 模拟完整 URL URL 改变时页面会重新加载history模式利 historypushState API 完成 URL 跳转须重新加载页面
VuexVuejs官方状态理模式处理项目庞时组件数量变遇需组件享状态时处理组件中转态抽离全局单例模式理组件树构成巨视图’树位置组件获取状态者触发行Vuex通定义隔离状态理中种概念通强制规维持视图状态间独立性代码变更结构化更易维护Vuex基思想Vuex思想鉴FluxReduxThe Elm ArchitectureVuex专门Vuejs设计状态理库利 Vuejs 细粒度数响应机制进行高效状态更新
iView套基 Vuejs 开源 UI 组件库服务 PC 界面中台产品Iview时火款Vuejs组件库iView组件功较丰富UI界面漂亮组件API友灵活iView方面做越越
Axios基PromiseHTTP库PromiseES2016特性Promise异步函数ES6推出广泛Axios正式基Promise实现Http库底层XMLHttpRequestsPromise做封装Axios发布众推崇
微信程序需载安装直接应快捷户量
22 Java介绍
项目台Java开发Java现世界数编程语言受欢迎门面象语言够跨台运行考虑操作系统样子程序员专心考虑业务逻辑实现担心台运行兼容性支持泛型Java广泛应企业开发移动应开发然现移动端开发语言kotlin门语言运行java虚拟机门语言诞生1991年JamesGosling等开发初名称做Oak1994年更名Java说名字Java咖啡Java带垃圾处理机制C语言C++样需程序员身担心垃圾回收造成存泄漏Java运行Java虚拟机台关Java作门编程语言语法严谨完善异常处理机制Java编写出程序安全健壮性强移植跨台Java成世界流行语言Java发展数众许Java编写调简单功强稳定库许问题时社区中容易找答案Java先代码编译字节码程序Jvm解释运行需台部署Java环境便担心成Java次编译处运行宣传口号
23 台项目架构介绍
项目采JavaEE三层架构分展示层业务逻辑层数控制层帮助开发员更容易关注某层必担心部分项目开发环节进行解耦中展示层户交互接受户数返回处理结果户项目中展示层Springmvc框架框架目封装许底层操作外提供简单接口方便程序员进行开发提高程序员开发效率SpringMVC框架种够帮助实现种基JavaMVC设计模式轻量级框架现受欢迎web层框架取代前struts2SpringMVC想MVC添加Spring特色IOC赖反转功时应程序高度解耦学SpringMVC程中知道SpringMVC基原生WEB开发中DispatcherServlet设计Struts2基filter设计SpringMVC着清晰模块划分模块着独立功分前端控制器请求处理映射器处理器适配器验证器表单象命令象视图解析器处理器页面控制器SpringMVC易扩展定义组件等方式扩展需求身业务定义部分逻辑
Dao层mybatisPlus框架该框架中国进行开发基mybatis相Mybatis增强工具修改mybatis逻辑没mybatis身进行修改基础进行增强拓展帮助简化开发提高开发效率Mybatis非常优秀持久层框架完全避免JDBC代码懂设置参数处理返回结果帮动映射结果pojo框架种设计模式面试中常问点非常值学
整台SpringBoot框架进行控制反转赖注入spring现Java开发台中流框架甚说现学Java学SpringSpring官网提供Java台开发套框架开源框架2003年兴起Netflix开源发布现Netflix提供微服务架构站式解决方案然项目没采微服务架构SpringBoot相Spring次拓展Spring肯定知道部署环境编码程中需配置量配置文件整合新框架时需新框架添加配置文件时非常繁琐Springboot简化程新框架引入需pom文件中添加应starter启动器做点方式惯配置原理许配置默认惯方式配置满足需求时根需求进行更改添加新配置采JavaConfig方式注解进行注入简化部署开发程必样创建量xml文件配置文件需applicationyml者applicationpropertiesspringboot嵌入Tomcat必载配置Tomcat服务器
项目maven进行构建springboot身赖maven导入赖
SpringSecurity理权限Spring搭建环境中整合SpringSecurity非常方便Spring Secutrity功强完善
NoSql非关系型数库Redis作缓存存储权限等信息常常变更信息存入缓存减少数库查询带性损耗
24 技术架构图
图21前端技术架构图
图22端技术架构图
3系统介绍
31 系统设计功结构
考勤理系统户进行考勤理生成考勤统计信息理者提供户考勤信息方便公司理根理者想法考勤方式方便户提供微信程序端进行考勤
考勤理系统功菜单分：
首页：根角色进入显示普通户签查数台理权限户查系统情况天考勤情况签等
角色理：超级理员编辑系统角色权限者增删角色
公司理部门理：公司理员理公司部门
公司理员工理：理系统户拥权限户新增户删角色者编辑户部门角色
考勤理考勤方式设置：拥权限户业面设置公司考勤方式设置修改方式具体参数重页面显示考勤二维码方
考勤理假期设置：拥权限户页面公司调整假期设置
审核：申请流程进行中需审核事件会里显示页面查审核记录者某抄送审核
申请请假申请：需请假时需页面填写信息进行申请
申请补卡申请：忘记卡者某情况需补卡时候需页面填写信息进行申请
考勤记录考勤记录：拥权限户页面查系统户考勤记录提供数分析数导出等功
考勤记录考勤记录：显示户考勤记录
考勤记录考勤统计：图表显示考勤统计信息
中心修改密码：户修改密码页面
图31系统功结构图
32 系统模块介绍
321权限理模块
权限理模块什权限理呢户显示页面操作限制理户菜单进入菜单页数进行操作等控制理简单说登录户根户信息显示具备权限菜单进入页面根户信息显示具备权限信息根户信息页面显示具备权限操作钮调台接口服务器先根户信息判断否应权限句话概括说户访问访问授权资源少权限理应十分广泛权限理模块需具备功
①路菜单理：登录户菜单进行控制户登录应授权菜单
②页面显示理：登录户菜单进行控制户登录应授权信息
③操作钮理：登录户菜单进行控制户登录应操作授权操作钮
④角色权限理：理角色编辑角色权限
⑤户角色理：编辑户角色
322考勤统计模块
考勤理系统中考勤统计模块出便利性安全性考虑前端选择相应滤条件显示方式条件交端端考勤数服务器MySql数库中取出端进行分析封装加密返回前端浏览器显示前端根数动态显示表格者更加直观清晰明图表
考勤理系统中考勤数统计模块具体应该实现功：
①户验证功：登录户具相应权限展示考勤数户观分析
②网络交互功：浏览器通服务台暴露接口http协议服务端发送请求实现浏览器服务器间交互数传输
③考勤数查询功：前端提供滤条件排序条件台根户指定条件查询相应数封装加密返回前端前端够根户需方式展示数表格显示生成直观图表者导出数仅查询某员工详细数够查询某批员工数
④统计功：根户需求统计段时间某部门等条件需求定条件方式统计数返回前端统计结果根户需求展示数者导出数excel文件保证统计数准确性
⑤分析功：根户需条件数定算法进行分析展示户迟次数日期变化趋势果户相应需求量实现相应数分析功
323审批模块
审批模块考勤理系统中较重模块审批模块提供申请功流程审批功审批模块请假申请补卡申请审核功组成
①请假申请功：需请假时需进行请假申请请假类型限制请假类型包括限年假事假病假调休产假等通审批方成功请假
②补卡申请功：忘记班时间卡时月限额中进行补卡申请通审核方补卡成功
③审核功：面介绍功中会部分流程需特定户进行审批户审批审核功通者通流程走应户时申请进行操作
33 系统例图
图32系统例图
4权限模块设计实现
41 权限模块设计
考勤理系统户角色权限设计事实户权限关系分离解耦户应权限十果新户需权限设置话重复性表设计处理中间加入角色表角色表设计更加灵活处理权限户间关系角色公司岗位需求划分出权限集合样户直接角色做关联降低耦合公司新增工作岗位时新增岗位需权限现角色新增角色关联需特定权限系统户角色权限设计时考虑技术权限做新设计权限页面做划分页面菜单提取出形成菜单表根Vuerouter路参数做详细设计具体详细设计面出页面具体权限形成权限表菜单表做外键关联
确定户表角色表菜单表权限表该考虑关系显然户角色关系角色菜单关系角色权限关系确定关系中间表设计结合关系现确定表sys_user(户表)sys_role(角色表)sys_menu(菜单表)sys_permission(权限表)sys_user_role(户角色表)sys_role_menu(角色菜单表)sys_role_permission(角色权限表) 户角色表户角色关系进行转换户角色表户表角色表成关系理角色菜单表角色权限表样转换关系建表实体类ER图：
图41ER图
sys_menu(菜单表)设计结合前端技术vuerouter路库前端路进行控制sys_menu(菜单表)字段idnameredirecttitlehide_in_menucomponentparent_idchildren_idsorticon菜单表前端菜单路进行控制中name作路路名称生成链接路径设计redirect作路重定title应页面标题hide_in_menu设置应菜单页面左侧菜单栏显示component存放应页面前端文件位置（url）parent_idchildren_id辨明应父级菜单子菜单sort做菜单排序icon存放应菜单图标余表做详细说明
户登录前前端注册登录404等页面做路拦截未登录访问做默认跳转登录页户登录动态注册路没权限页面旧没法跳转样话户权限做理避免户直接路做操作跳转没权限页面
42 权限模块实现
权限模块说重户出现越权访问情况什越权访问情况呢访问某没权限资源例：户a权限中没b页面权限通某种情况成功访问b页面越权访问种理种系统中利Vuerouter动态路注册实现页面理设计方面已详细讲表设计里详细讲具体实现吧首先户未登录情况注册登录页404页面Vuerouter全局守卫做路拦截
if (token && toname LOGIN_PAGE_NAME) {
next({
name LOGIN_PAGE_NAME
})
} else if (token && toname LOGIN_PAGE_NAME) {
next()
} else if (token && toname LOGIN_PAGE_NAME) {
next({
name confighomeName
})
} else {
if (storestateuserhasGetInfo) {
initRouters(store)
next()
} else {
storedispatch(＇getUserInfo＇)then(() > {
initRouters(store)
next()
})catch(() > {
setToken(＇＇)
next({
name LOGIN_PAGE_NAME
})
})
}
}
面Vuerouter登录拦截实现中tokencookies保存判断户否登录給端做身份验证全局守卫中拦截做次判断未登录跳转页面登录页进行拦截跳转登录页未登陆跳转页面登录页放行已登录跳转页面登录页进行拦截跳转台页然户否获取信息做判断storeVuex全局状态理器判断没加载户信息加载直接进行初始化路没加载户信息先加载户信息初始化路防止户信息加载失败出现问题出现异常时清空token户跳转登录页Vuerouter全局守卫概实现
List
考勤理系统户角色权限理设计实现
考勤理系统户角色权限设计实现
摘
互联网信息技术急速发展新时代基微信程序二维码定位等功设计利二维码定位功进行签考勤理系统考勤理员设置签点范围系统提供导出理户考勤信息功请假申请功假期理功等文重点讲述该系统户角色权限设计实现权限模块系统权限进行设计实现redis缓存优化系统增强系统性
关键词：考勤理系统户角色权限设计Redis
Design and Implementation of User Role and Authority in Time Attendance Management System
Abstract
In the new era of rapid development of Internet information technology based on the WeChat applet＇s QR code and positioning functions we have designed an attendance management system that can use the QR code and positioning functions to check in And the scope and the system provides the function of exporting and managing user＇s attendance information leave application function vacation management function etc This article focuses on the design and implementation of the system＇s user roles and permissions that is the permission module which designs and implements system permissions optimizes the system using redis cache and enhances system performance
Keywords Time and Attendance Management SystemDesign of user roles and permissionsRedis
目 录
1 前言 6
2相关技术介绍 6
21 前端技术介绍 7
22 Java介绍 8
23 台项目架构介绍 8
24 技术架构图 10
3系统介绍 10
31 系统设计功结构 10
32 系统模块介绍 12
321权限理模块 12
322考勤统计模块 12
323审批模块 13
33 系统例图 14
4权限模块设计实现 14
41 权限模块设计 14
42 权限模块实现 16
5测试 20
51 登录功测试 20
52 角色增删改查功测试 21
53 员工增删改查功测试 22
53 角色户权限控制测试 23
6微信程序界面 25
7结 27
附录1 28
1 前言
考勤理系统基微信程序二维码定位等功实现公司进行考勤理系统系统支持二维码定位口令签什选择微信程序呢仅仅微信户量微信程序便捷需重新载软件占存等优点托微信程序便捷应环境开发考勤理系统考勤理系统分成程序端web端程序端公司员工考勤web端支持考勤数统计审批流程理考勤规设置公司员工理考勤理系统分成权限理模块考勤统计模块审批模块三模块文重点研究考勤理系统权限理模块具体分析系统中户角色权限关系进行梳理设计程中前端实现进行交融页面查权限进行抽取单独建立路表权限页面进行划分分关联应页面具体设计实现文面部分出
2相关技术介绍
21 前端技术介绍
需求引入需第三方库VueMVVM模式框架MVVMModelViewViewModel数层dom层(户界面层)中间层（处理数界面）MVVM模式提供数双绑定分离视图（View）模型（Model）降低代码耦合提高重性Vuejs20版引入虚拟DOM初始渲染速度幅度提升降低存消耗Vue官方甚React做实验结果出Vue渲染优React年Vuejs越越国Vuejs已Reactjs更
VuerouterVuejs 官方路理器适构建SPA(单页应程序)SPA传统应程序区传统应程序切换页面会重新请求服务器获取新完整页面SPA会第次请求加载页面次请求 仅仅获取必数然 页面中js解析获取数 展示页面中SPA核心：更新视图重新请求页面样产生缺点果端做服务器渲染会导致单页面应爬取数SEO友VuerouterSPA路路质建立起URL页面间映射关系Vue说建立URL组件间映射关系Vuerouter实现SPA路时提供两种方式：hash模式history模式hash模式 URL hash 模拟完整 URL URL 改变时页面会重新加载history模式利 historypushState API 完成 URL 跳转须重新加载页面
VuexVuejs官方状态理模式处理项目庞时组件数量变遇需组件享状态时处理组件中转态抽离全局单例模式理组件树构成巨视图’树位置组件获取状态者触发行Vuex通定义隔离状态理中种概念通强制规维持视图状态间独立性代码变更结构化更易维护Vuex基思想Vuex思想鉴FluxReduxThe Elm ArchitectureVuex专门Vuejs设计状态理库利 Vuejs 细粒度数响应机制进行高效状态更新
iView套基 Vuejs 开源 UI 组件库服务 PC 界面中台产品Iview时火款Vuejs组件库iView组件功较丰富UI界面漂亮组件API友灵活iView方面做越越
Axios基PromiseHTTP库PromiseES2016特性Promise异步函数ES6推出广泛Axios正式基Promise实现Http库底层XMLHttpRequestsPromise做封装Axios发布众推崇
微信程序需载安装直接应快捷户量
22 Java介绍
项目台Java开发Java现世界数编程语言受欢迎门面象语言够跨台运行考虑操作系统样子程序员专心考虑业务逻辑实现担心台运行兼容性支持泛型Java广泛应企业开发移动应开发然现移动端开发语言kotlin门语言运行java虚拟机门语言诞生1991年JamesGosling等开发初名称做Oak1994年更名Java说名字Java咖啡Java带垃圾处理机制C语言C++样需程序员身担心垃圾回收造成存泄漏Java运行Java虚拟机台关Java作门编程语言语法严谨完善异常处理机制Java编写出程序安全健壮性强移植跨台Java成世界流行语言Java发展数众许Java编写调简单功强稳定库许问题时社区中容易找答案Java先代码编译字节码程序Jvm解释运行需台部署Java环境便担心成Java次编译处运行宣传口号
23 台项目架构介绍
项目采JavaEE三层架构分展示层业务逻辑层数控制层帮助开发员更容易关注某层必担心部分项目开发环节进行解耦中展示层户交互接受户数返回处理结果户项目中展示层Springmvc框架框架目封装许底层操作外提供简单接口方便程序员进行开发提高程序员开发效率SpringMVC框架种够帮助实现种基JavaMVC设计模式轻量级框架现受欢迎web层框架取代前struts2SpringMVC想MVC添加Spring特色IOC赖反转功时应程序高度解耦学SpringMVC程中知道SpringMVC基原生WEB开发中DispatcherServlet设计Struts2基filter设计SpringMVC着清晰模块划分模块着独立功分前端控制器请求处理映射器处理器适配器验证器表单象命令象视图解析器处理器页面控制器SpringMVC易扩展定义组件等方式扩展需求身业务定义部分逻辑
Dao层mybatisPlus框架该框架中国进行开发基mybatis相Mybatis增强工具修改mybatis逻辑没mybatis身进行修改基础进行增强拓展帮助简化开发提高开发效率Mybatis非常优秀持久层框架完全避免JDBC代码懂设置参数处理返回结果帮动映射结果pojo框架种设计模式面试中常问点非常值学
整台SpringBoot框架进行控制反转赖注入spring现Java开发台中流框架甚说现学Java学SpringSpring官网提供Java台开发套框架开源框架2003年兴起Netflix开源发布现Netflix提供微服务架构站式解决方案然项目没采微服务架构SpringBoot相Spring次拓展Spring肯定知道部署环境编码程中需配置量配置文件整合新框架时需新框架添加配置文件时非常繁琐Springboot简化程新框架引入需pom文件中添加应starter启动器做点方式惯配置原理许配置默认惯方式配置满足需求时根需求进行更改添加新配置采JavaConfig方式注解进行注入简化部署开发程必样创建量xml文件配置文件需applicationyml者applicationpropertiesspringboot嵌入Tomcat必载配置Tomcat服务器
项目maven进行构建springboot身赖maven导入赖
SpringSecurity理权限Spring搭建环境中整合SpringSecurity非常方便Spring Secutrity功强完善
NoSql非关系型数库Redis作缓存存储权限等信息常常变更信息存入缓存减少数库查询带性损耗
24 技术架构图
图21前端技术架构图
图22端技术架构图
3系统介绍
31 系统设计功结构
考勤理系统户进行考勤理生成考勤统计信息理者提供户考勤信息方便公司理根理者想法考勤方式方便户提供微信程序端进行考勤
考勤理系统功菜单分：
首页：根角色进入显示普通户签查数台理权限户查系统情况天考勤情况签等
角色理：超级理员编辑系统角色权限者增删角色
公司理部门理：公司理员理公司部门
公司理员工理：理系统户拥权限户新增户删角色者编辑户部门角色
考勤理考勤方式设置：拥权限户业面设置公司考勤方式设置修改方式具体参数重页面显示考勤二维码方
考勤理假期设置：拥权限户页面公司调整假期设置
审核：申请流程进行中需审核事件会里显示页面查审核记录者某抄送审核
申请请假申请：需请假时需页面填写信息进行申请
申请补卡申请：忘记卡者某情况需补卡时候需页面填写信息进行申请
考勤记录考勤记录：拥权限户页面查系统户考勤记录提供数分析数导出等功
考勤记录考勤记录：显示户考勤记录
考勤记录考勤统计：图表显示考勤统计信息
中心修改密码：户修改密码页面
图31系统功结构图
32 系统模块介绍
321权限理模块
权限理模块什权限理呢户显示页面操作限制理户菜单进入菜单页数进行操作等控制理简单说登录户根户信息显示具备权限菜单进入页面根户信息显示具备权限信息根户信息页面显示具备权限操作钮调台接口服务器先根户信息判断否应权限句话概括说户访问访问授权资源少权限理应十分广泛权限理模块需具备功
①路菜单理：登录户菜单进行控制户登录应授权菜单
②页面显示理：登录户菜单进行控制户登录应授权信息
③操作钮理：登录户菜单进行控制户登录应操作授权操作钮
④角色权限理：理角色编辑角色权限
⑤户角色理：编辑户角色
322考勤统计模块
考勤理系统中考勤统计模块出便利性安全性考虑前端选择相应滤条件显示方式条件交端端考勤数服务器MySql数库中取出端进行分析封装加密返回前端浏览器显示前端根数动态显示表格者更加直观清晰明图表
考勤理系统中考勤数统计模块具体应该实现功：
①户验证功：登录户具相应权限展示考勤数户观分析
②网络交互功：浏览器通服务台暴露接口http协议服务端发送请求实现浏览器服务器间交互数传输
③考勤数查询功：前端提供滤条件排序条件台根户指定条件查询相应数封装加密返回前端前端够根户需方式展示数表格显示生成直观图表者导出数仅查询某员工详细数够查询某批员工数
④统计功：根户需求统计段时间某部门等条件需求定条件方式统计数返回前端统计结果根户需求展示数者导出数excel文件保证统计数准确性
⑤分析功：根户需条件数定算法进行分析展示户迟次数日期变化趋势果户相应需求量实现相应数分析功
323审批模块
审批模块考勤理系统中较重模块审批模块提供申请功流程审批功审批模块请假申请补卡申请审核功组成
①请假申请功：需请假时需进行请假申请请假类型限制请假类型包括限年假事假病假调休产假等通审批方成功请假
②补卡申请功：忘记班时间卡时月限额中进行补卡申请通审核方补卡成功
③审核功：面介绍功中会部分流程需特定户进行审批户审批审核功通者通流程走应户时申请进行操作
33 系统例图
图32系统例图
4权限模块设计实现
41 权限模块设计
考勤理系统户角色权限设计事实户权限关系分离解耦户应权限十果新户需权限设置话重复性表设计处理中间加入角色表角色表设计更加灵活处理权限户间关系角色公司岗位需求划分出权限集合样户直接角色做关联降低耦合公司新增工作岗位时新增岗位需权限现角色新增角色关联需特定权限系统户角色权限设计时考虑技术权限做新设计权限页面做划分页面菜单提取出形成菜单表根Vuerouter路参数做详细设计具体详细设计面出页面具体权限形成权限表菜单表做外键关联
确定户表角色表菜单表权限表该考虑关系显然户角色关系角色菜单关系角色权限关系确定关系中间表设计结合关系现确定表sys_user(户表)sys_role(角色表)sys_menu(菜单表)sys_permission(权限表)sys_user_role(户角色表)sys_role_menu(角色菜单表)sys_role_permission(角色权限表) 户角色表户角色关系进行转换户角色表户表角色表成关系理角色菜单表角色权限表样转换关系建表实体类ER图：
图41ER图
sys_menu(菜单表)设计结合前端技术vuerouter路库前端路进行控制sys_menu(菜单表)字段idnameredirecttitlehide_in_menucomponentparent_idchildren_idsorticon菜单表前端菜单路进行控制中name作路路名称生成链接路径设计redirect作路重定title应页面标题hide_in_menu设置应菜单页面左侧菜单栏显示component存放应页面前端文件位置（url）parent_idchildren_id辨明应父级菜单子菜单sort做菜单排序icon存放应菜单图标余表做详细说明
户登录前前端注册登录404等页面做路拦截未登录访问做默认跳转登录页户登录动态注册路没权限页面旧没法跳转样话户权限做理避免户直接路做操作跳转没权限页面
42 权限模块实现
权限模块说重户出现越权访问情况什越权访问情况呢访问某没权限资源例：户a权限中没b页面权限通某种情况成功访问b页面越权访问种理种系统中利Vuerouter动态路注册实现页面理设计方面已详细讲表设计里详细讲具体实现吧首先户未登录情况注册登录页404页面Vuerouter全局守卫做路拦截
if (token && toname LOGIN_PAGE_NAME) {
next({
name LOGIN_PAGE_NAME
})
} else if (token && toname LOGIN_PAGE_NAME) {
next()
} else if (token && toname LOGIN_PAGE_NAME) {
next({
name confighomeName
})
} else {
if (storestateuserhasGetInfo) {
initRouters(store)
next()
} else {
storedispatch(＇getUserInfo＇)then(() > {
initRouters(store)
next()
})catch(() > {
setToken(＇＇)
next({
name LOGIN_PAGE_NAME
})
})
}
}
面Vuerouter登录拦截实现中tokencookies保存判断户否登录給端做身份验证全局守卫中拦截做次判断未登录跳转页面登录页进行拦截跳转登录页未登陆跳转页面登录页放行已登录跳转页面登录页进行拦截跳转台页然户否获取信息做判断storeVuex全局状态理器判断没加载户信息加载直接进行初始化路没加载户信息先加载户信息初始化路防止户信息加载失败出现问题出现异常时清空token户跳转登录页Vuerouter全局守卫概实现
List