03.02 后台用户权限控制

JooLun 于 2026-10-21 14:40:14 +08:00 修改了此页面

用户权限系统

系统概述

一个用户权限管理系统，主要包括三个元素：用户、角色、权限。我们所要管理的，也就是用户、角色和权限之间的关系
用户：基本上所有的应用，无论是移动端，PC端，C端或B端产品，登陆都需要一个用户。只是对于C端的产品，都是用户自己注册即可。而对于后台产品而言，是需要公司内部人员去创建用户的。
角色：所谓角色，就是用来控制各个用户的操作范围的，可以理解为权限组。因为一个系统中权限太多，我们不可能每创建一个用户，就去挨个设置一遍权限，因此可以根据不同的部门、职级、工作内容等来对权限进行分组，制定成不同的角色，这样，在创建用户时，就可以直接赋予用户不同的角色，从而把角色拥有的权限给到这个用户。
系统的主要流程为：将权限设置成不同的集合，即角色，再将角色绑定到用户上，那么这个用户就拥有了这些角色的权限集合。一个用户可以绑定多个角色，一个角色又拥有多个权限。

如上图所示：用户A拥有了角色1和角色2两个角色，从而拥有了“增加、删除、审核”的权限。

管理流程

菜单管理：可以理解为每个菜单就是一个不同的权限，通过不同的”权限标识“区分

角色管理：不同角色设置不同权限

用户管理：管理用户用户信息，并将相应角色授予用户

用户账号类型说明

我们将系统里用户（joolun_upms.sys_user表）的账号类型分别定义为（-1：系统平台管理员；1：租户管理员；2：店铺管理员；3：商城供应商账号；4：平台供应商账号）五种
-1：系统平台管理员，可在后台切换租户来管理其他租户的数据；并不受数据权限（DataScopeInterceptor.java）、店铺数据权限（ShopIdInterceptor.java）限制；一般用做平台系统最高权限管理员；每个系统平台管理员用户管理的租户可以在后台分别指定；我们将系统平台管理员数据单独出来用租户ID-1管理，并单独对应菜单【平台管理】-【平台系统权限】；新增的系统平台用户账号类型默认为-1，租户ID也默认为-1

1：租户（商城）管理员，只能管理自己所属租户的数据；受数据权限（DataScopeInterceptor.java）限制，但不受店铺数据权限（ShopIdInterceptor.java）限制；一般用做某租户（商城）的管理员
2：店铺管理员，只能管理自己所属店铺的数据；并受数据权限（DataScopeInterceptor.java）、店铺数据权限（ShopIdInterceptor.java）限制；一般用做某店铺的管理员，在后台【商城模块】-【店铺管理】-【店员管理】新增的店员默认为此类型
3：商城供应商账号，只能管理自己所属商城供应商的数据；和店铺管理员同理
4：平台供应商账号，管理整个平台供应商的数据；认证仍沿用upms，但业务归属为平台公共供应商模块

演示账号说明

我们演示环境为了方便给大家展示，创建了几个演示角色和账号

system、admin对应账号类型【系统平台管理员-1】
mall对应账号类型【租户（商城）管理员1】
huawei对应账号类型【店铺管理员2】
supplier对应账号类型【商城供应商账号3】
平台供应商账号类型为【平台供应商账号4】，由后续平台公共供应商模块独立创建和维护

03.05-多租户功能

前端控制

前端主要使用vuex保存用户的权限信息，然后通过v-if 判断是否有权限，如果有权限就渲染这个dom元素。我们以公众号用户管理页面来讲解

从vuex 获取保存的permissions，结合avue-crud组件实现操作按钮的显隐

https://avuejs.com/doc/crud/crud-permission

<avue-crud ref="crud"
     :page.sync="page"
     :data="tableData"
     :permission="permissionList"
     :option="tableOption"
     v-model="form"
     @on-load="getPage"
     @refresh-change="refreshChange"
     @row-update="handleUpdate"
     @row-save="handleSave"
     @row-del="handleDel">
</avue-crud>

computed: {
      ...mapGetters(['permissions']),
      permissionList() {
        return {
          addBtn: this.permissions['wxmp:wxuser:add'] ? true : false,
          delBtn: this.permissions['wxmp:wxuser:del'] ? true : false,
          editBtn: this.permissions['wxmp:wxuser:edit'] ? true : false,
          viewBtn: this.permissions['wxmp:wxuser:get'] ? true : false,
        }
      }
    }

单独按钮结合v-if实现操作按钮的显隐

<el-button type="success"
    @click="doMore()"
    size="small"
    icon="el-icon-document"
    v-if="permissions['wxmp:wxuser:edit']">其他操作</el-button>

后端控制

注解@PreAuthorize，通过获取用户菜单列表，和请求的地址和请求方法对比判断有没有权限

@ApiOperation(value = "通过id查询微信用户")
@GetMapping("/{id}")
@PreAuthorize("@ato.hasAuthority('wxmp:wxuser:get')")
public R getById(@PathVariable("id") String id){
    return R.ok(wxUserService.getById(id));
}

上面的权限要在后台菜单管理中添加，并授权给了用户的角色，具体请查看文档：A 代码生成器使用说明、菜单权限配置