用户角色权限、按钮控制功表及返回数据格式

1、表结构

1.1 用户表system_user

CREATE TABLE `system_user` (
  `id` bigint(20) NOT NULL AUTO_INCREMENT COMMENT '用户ID',
  `username` varchar(30) COLLATE utf8mb4_unicode_ci NOT NULL COMMENT '用户账号',
  `password` varchar(100) COLLATE utf8mb4_unicode_ci NOT NULL DEFAULT '' COMMENT '密码',
  `nickname` varchar(30) COLLATE utf8mb4_unicode_ci NOT NULL COMMENT '用户昵称',
  `remark` varchar(500) COLLATE utf8mb4_unicode_ci DEFAULT NULL COMMENT '备注',
  `dept_id` bigint(20) DEFAULT NULL COMMENT '部门ID',
  `post_ids` varchar(255) COLLATE utf8mb4_unicode_ci DEFAULT NULL COMMENT '岗位编号数组',
  `email` varchar(50) COLLATE utf8mb4_unicode_ci DEFAULT '' COMMENT '用户邮箱',
  `mobile` varchar(11) COLLATE utf8mb4_unicode_ci DEFAULT '' COMMENT '手机号码',
  `sex` tinyint(4) DEFAULT 0 COMMENT '用户性别',
  `avatar` varchar(100) COLLATE utf8mb4_unicode_ci DEFAULT '' COMMENT '头像地址',
  `status` tinyint(4) NOT NULL DEFAULT 0 COMMENT '帐号状态(0正常 1停用)',
  `login_ip` varchar(50) COLLATE utf8mb4_unicode_ci DEFAULT '' COMMENT '最后登录IP',
  `login_date` datetime DEFAULT NULL COMMENT '最后登录时间',
  `creator` varchar(64) COLLATE utf8mb4_unicode_ci DEFAULT '' COMMENT '创建者',
  `create_time` datetime NOT NULL DEFAULT current_timestamp() COMMENT '创建时间',
  `updater` varchar(64) COLLATE utf8mb4_unicode_ci DEFAULT '' COMMENT '更新者',
  `update_time` datetime NOT NULL DEFAULT current_timestamp() ON UPDATE current_timestamp() COMMENT '更新时间',
  `deleted` bit(1) NOT NULL DEFAULT b'0' COMMENT '是否删除',
  `tenant_id` bigint(20) NOT NULL DEFAULT 0 COMMENT '租户编号',
  PRIMARY KEY (`id`) USING BTREE,
  UNIQUE KEY `idx_username` (`username`,`update_time`,`tenant_id`) USING BTREE
) ENGINE=InnoDB AUTO_INCREMENT=127 DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_unicode_ci ROW_FORMAT=DYNAMIC COMMENT='用户信息表';

1.2 用户角色表system_user_role

CREATE TABLE `system_user_role` (
  `id` bigint(20) NOT NULL AUTO_INCREMENT COMMENT '自增编号',
  `user_id` bigint(20) NOT NULL COMMENT '用户ID',
  `role_id` bigint(20) NOT NULL COMMENT '角色ID',
  `creator` varchar(64) COLLATE utf8mb4_unicode_ci DEFAULT '' COMMENT '创建者',
  `create_time` datetime DEFAULT NULL COMMENT '创建时间',
  `updater` varchar(64) COLLATE utf8mb4_unicode_ci DEFAULT '' COMMENT '更新者',
  `update_time` datetime DEFAULT NULL COMMENT '更新时间',
  `deleted` bit(1) DEFAULT b'0' COMMENT '是否删除',
  `tenant_id` bigint(20) NOT NULL DEFAULT 0 COMMENT '租户编号',
  PRIMARY KEY (`id`) USING BTREE
) ENGINE=InnoDB AUTO_INCREMENT=35 DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_unicode_ci ROW_FORMAT=DYNAMIC COMMENT='用户和角色关联表';

1.3 角色表system_role

CREATE TABLE `system_role` (
  `id` bigint(20) NOT NULL AUTO_INCREMENT COMMENT '角色ID',
  `name` varchar(30) COLLATE utf8mb4_unicode_ci NOT NULL COMMENT '角色名称',
  `code` varchar(100) COLLATE utf8mb4_unicode_ci NOT NULL COMMENT '角色权限字符串',
  `sort` int(11) NOT NULL COMMENT '显示顺序',
  `data_scope` tinyint(4) NOT NULL DEFAULT 1 COMMENT '数据范围(1:全部数据权限 2:自定数据权限 3:本部门数据权限 4:本部门及以下数据权限)',
  `data_scope_dept_ids` varchar(500) COLLATE utf8mb4_unicode_ci NOT NULL DEFAULT '' COMMENT '数据范围(指定部门数组)',
  `status` tinyint(4) NOT NULL COMMENT '角色状态(0正常 1停用)',
  `type` tinyint(4) NOT NULL COMMENT '角色类型',
  `remark` varchar(500) COLLATE utf8mb4_unicode_ci DEFAULT NULL COMMENT '备注',
  `creator` varchar(64) COLLATE utf8mb4_unicode_ci DEFAULT '' COMMENT '创建者',
  `create_time` datetime NOT NULL DEFAULT current_timestamp() COMMENT '创建时间',
  `updater` varchar(64) COLLATE utf8mb4_unicode_ci DEFAULT '' COMMENT '更新者',
  `update_time` datetime NOT NULL DEFAULT current_timestamp() ON UPDATE current_timestamp() COMMENT '更新时间',
  `deleted` bit(1) NOT NULL DEFAULT b'0' COMMENT '是否删除',
  `tenant_id` bigint(20) NOT NULL DEFAULT 0 COMMENT '租户编号',
  PRIMARY KEY (`id`) USING BTREE
) ENGINE=InnoDB AUTO_INCREMENT=116 DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_unicode_ci ROW_FORMAT=DYNAMIC COMMENT='角色信息表';

1.4 菜单表system_menu

CREATE TABLE `system_menu` (
  `id` bigint(20) NOT NULL AUTO_INCREMENT COMMENT '菜单ID',
  `name` varchar(50) COLLATE utf8mb4_unicode_ci NOT NULL COMMENT '菜单名称',
  `permission` varchar(100) COLLATE utf8mb4_unicode_ci NOT NULL DEFAULT '' COMMENT '权限标识',
  `menu_type` tinyint(4) NOT NULL COMMENT '菜单类型(M目录 C菜单 F按钮)',
  `sort` int(11) NOT NULL DEFAULT 0 COMMENT '显示顺序',
  `parent_id` bigint(20) NOT NULL DEFAULT 0 COMMENT '父菜单ID',
  `path` varchar(200) COLLATE utf8mb4_unicode_ci DEFAULT '' COMMENT '路由地址',
  `icon` varchar(100) COLLATE utf8mb4_unicode_ci DEFAULT '#' COMMENT '菜单图标',
  `component` varchar(255) COLLATE utf8mb4_unicode_ci DEFAULT NULL COMMENT '组件路径',
  `status` tinyint(4) NOT NULL DEFAULT 0 COMMENT '菜单状态(0正常 1停用)',
  `creator` varchar(64) COLLATE utf8mb4_unicode_ci DEFAULT '' COMMENT '创建者',
  `create_time` datetime NOT NULL DEFAULT current_timestamp() COMMENT '创建时间',
  `updater` varchar(64) COLLATE utf8mb4_unicode_ci DEFAULT '' COMMENT '更新者',
  `update_time` datetime NOT NULL DEFAULT current_timestamp() ON UPDATE current_timestamp() COMMENT '更新时间',
  `deleted` bit(1) NOT NULL DEFAULT b'0' COMMENT '是否删除',
  PRIMARY KEY (`id`) USING BTREE
) ENGINE=InnoDB AUTO_INCREMENT=1333 DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_unicode_ci ROW_FORMAT=DYNAMIC COMMENT='菜单权限表';
DIR(1), // 目录
MENU(2), // 菜单
BUTTON(3) // 按钮

 

/**

* 权限标识

* <p>

* 一般格式为:${系统}:${模块}:${操作}

* 例如说:system:admin:add,即 system 服务的添加管理员。

* <p>

* 当我们把该 MenuDO 赋予给角色后,意味着该角色有该资源:

* - 对于后端,配合 @PreAuthorize 注解,配置 API 接口需要该权限,从而对 API 接口进行权限控制。
@PreAuthorize("@ss.hasPermission('system:dict:create')")
* - 对于前端,配合前端标签,配置按钮是否展示,避免用户没有该权限时,结果可以看到该操作。

*/

前端控制权限实现:

 ​​​​​​​hasPermi.js

/**
 * 角色权限处理
 * Copyright (c) 2019 ruoyi
 */

import store from '@/store'

export default {
  inserted(el, binding, vnode) {
    const {value} = binding
    const super_admin = "admin";
    const roles = store.getters && store.getters.roles

    if (value && value instanceof Array && value.length > 0) {
      const roleFlag = value

      const hasRole = roles.some(role => {
        return super_admin === role || roleFlag.includes(role)
      })

      if (!hasRole) {
        el.parentNode && el.parentNode.removeChild(el)
      }
    } else {
      throw new Error(`请设置角色权限标签值"`)
    }
  }
}

​​​​​​​ index.js

import hasRole from './permission/hasRole'
import hasPermi from './permission/hasPermi'
import dialogDrag from './dialog/drag'
import dialogDragWidth from './dialog/dragWidth'
import dialogDragHeight from './dialog/dragHeight'
import clipboard from './module/clipboard'

const install = function (Vue) {
  Vue.directive('hasRole', hasRole)
  Vue.directive('hasPermi', hasPermi)
  Vue.directive('clipboard', clipboard)
  Vue.directive('dialogDrag', dialogDrag)
  Vue.directive('dialogDragWidth', dialogDragWidth)
  Vue.directive('dialogDragHeight', dialogDragHeight)
}

if (window.Vue) {
  window['hasRole'] = hasRole
  window['hasPermi'] = hasPermi
  Vue.use(install); // eslint-disable-line
}

export default install

1.5 角色和菜单表system_role_menu

CREATE TABLE `system_role_menu` (
  `id` bigint(20) NOT NULL AUTO_INCREMENT COMMENT '自增编号',
  `role_id` bigint(20) NOT NULL COMMENT '角色ID',
  `menu_id` bigint(20) NOT NULL COMMENT '菜单ID',
  `creator` varchar(64) COLLATE utf8mb4_unicode_ci DEFAULT '' COMMENT '创建者',
  `create_time` datetime NOT NULL DEFAULT current_timestamp() COMMENT '创建时间',
  `updater` varchar(64) COLLATE utf8mb4_unicode_ci DEFAULT '' COMMENT '更新者',
  `update_time` datetime NOT NULL DEFAULT current_timestamp() ON UPDATE current_timestamp() COMMENT '更新时间',
  `deleted` bit(1) NOT NULL DEFAULT b'0' COMMENT '是否删除',
  `tenant_id` bigint(20) NOT NULL DEFAULT 0 COMMENT '租户编号',
  PRIMARY KEY (`id`) USING BTREE
) ENGINE=InnoDB AUTO_INCREMENT=1964 DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_unicode_ci ROW_FORMAT=DYNAMIC COMMENT='角色和菜单关联表';

2、查询接口

返回用户数据格式:

{

    "code": 0,

    "data": {

        "user": {

            "id": 123,

            "nickname": "昵称123",

            "avatar": ""

        },

        "roles": [

            "test"

        ],

        "permissions": [

            "",

            "system:sysPoc:update",

            "system:error-code:export",

            "system:menu:query",

            "system:permission:assign-role-menu",

            "system:sysPoc:delete",

            "system:sysLabel:import",

            "system:user:query",

            "system:error-code:query",

            "system:sysPort:deletePort",

            "system:user:export",

            "system:dept:update",

            "system:dept:delete",

            "system:error-code:create",

            "system:dept:query",

            "system:role:delete",

            "system:dept:create",

            "system:menu:create",

            "system:sysFingerRules:deteleRule",

            "system:user-session:page",

            "system:dict:create",

            "system:dict:query",

            "system:dict:update",

            "system:sysFingerRules:updateWuYan",

            "system:sysIp:update",

            "system:user:update-password",

            "system:sysFingerRules:deleteClassify",

            "system:dict:export",

            "system:sysIp:create",

            "system:user:delete",

            "system:user:import",

            "system:sysPort:updateGroup",

            "system:error-code:update",

            "system:user:update",

            "system:sysFingerRules:updateRule",

            "system:menu:delete",

            "system:sysPoc:create",

            "system:sysLabel:export",

            "system:sysIp:export",

            "system:sysPort:createPort",

            "system:error-code:delete",

            "system:sysPort:deleteGroup",

            "system:menu:update",

            "system:sysFingerRules:updateClassify",

            "system:sysFingerRules:createRule",

            "system:sysPort:createGroup",

            "system:login-log:query",

            "system:permission:assign-role-data-scope",

            "system:sysFingerRules:transferClassify",

            "system:role:update",

            "system:sysPort:updatePort",

            "system:user:list",

            "system:login-log:export",

            "system:user:create",

            "system:operate-log:query",

            "system:role:export",

            "system:sysFingerRules:createClassify",

            "system:permission:assign-user-role",

            "system:sysIp:delete",

            "system:role:create",

            "system:dict:delete",

            "system:operate-log:export",

            "system:role:query"

        ]

    },

    "msg": ""

}

  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
前端的Vue权限管理是指在Vue框架中对用户角色进行权限控制,包括菜单权限按钮权限。其中菜单权限指的是用户所能看到的菜单列表,而按钮权限指的是用户在进行操作时能够操作的按钮。 在实现前端Vue权限管理时,我们可以通过调用后台接口来获取用户权限信息。后台接口会返回一个权限列表,其中包含菜单权限按钮权限的相关信息。通过解析这个权限列表,我们可以构建出一个路由表,然后使用Vue的路由守卫功能来控制用户的访问权限。 在构建路由表时,我们可以使用Vue的router.addRoutes方法来根据后台接口传递的数据动态生成路由。首先,我们需要将后台返回权限列表转换成Vue路由的配置对象,然后通过调用router.addRoutes方法将这些配置对象添加到路由表中。这样,当用户登录成功后,根据其权限信息动态生成的路由表就会生效。 在路由守卫中,我们可以通过在每个路由的meta字段中设置对应的权限信息,然后在beforeEach钩子函数中进行权限判断。当用户访问一个需要权限的路由时,我们可以根据用户角色权限信息来判断该用户是否有权访问该路由。如果有权访问,则继续进行路由跳转;如果没有权限,则进行相应的处理,如跳转到一个没有权限的页面或者提示用户权限等。 综上所述,前端的Vue权限管理是通过调用后台接口获取用户权限信息,并根据这些信息动态生成路由表来控制用户的菜单权限按钮权限。通过使用Vue的路由守卫功能,我们可以在每个路由的beforeEach钩子函数中进行权限判断,从而实现前端的权限管理功能。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值