@RestController
@RequestMapping("/users")
public class UserController {
    
    @PostMapping
    @PreAuthorize("@ss.hasPermission('sys:user:add')")
    public Result<Void> addUser(@RequestBody @Validated UserDTO userDTO) {
        // 新增用户逻辑
    }
    
    @PutMapping
    @PreAuthorize("@ss.hasPermission('sys:user:update')")
    public Result<Void> updateUser(@RequestBody @Validated UserDTO userDTO) {
        // 更新用户逻辑
    }
}

权限守卫实现:

@Component("ss")
public class PermissionGuard {
    
    public boolean hasPermission(String permission) {
        // 1. 获取当前用户
        UserPrincipal user = AuthContext.getCurrentUser();
        
        // 2. 检查用户是否为超级管理员
        if (user.isSuperAdmin()) {
            return true;
        }
        
        // 3. 检查用户是否拥有该权限
        return user.getPermissions().contains(permission);
    }
}

4.2 前端权限控制

流程:

用户登录成功后，获取用户的菜单列表和权限列表
根据菜单列表动态生成左侧菜单栏
根据权限列表控制页面按钮的显示/隐藏

实现方式:

4.2.1 菜单权限控制

// 获取用户菜单
const menuList = await getMenuList();
// 动态生成路由
const routes = generateRoutes(menuList);
// 添加到路由表
routes.forEach(route => router.addRoute(route));

4.2.2 按钮权限控制

使用 v-auth 指令控制按钮显示：

<template>
  <button v-auth="'sys:user:add'">新增用户</button>
  <button v-auth="'sys:user:delete'">删除用户</button>
</template>

或者使用 AccessControl 组件：

<template>
  <AccessControl :access="'sys:user:add'">
    <button>新增用户</button>
  </AccessControl>
</template>

权限指令实现:

export const AuthDirective = {
  mounted(el: HTMLElement, binding: DirectiveBinding) {
    const permission = binding.value;
    // 检查用户是否拥有该权限
    if (!useAccess().hasPermission(permission)) {
      el.style.display = 'none';
    }
  }
};

5. 核心代码结构

5.1 后端代码结构

tagtag-module-iam
└── src
    └── main
        ├── java
        │   └── dev
        │       └── tagtag
        │           └── module
        │               └── iam
        │                   ├── controller
        │                   │   ├── DeptController.java
        │                   │   ├── MenuController.java
        │                   │   ├── RoleController.java
        │                   │   └── UserController.java
        │                   ├── entity
        │                   │   ├── DeptEntity.java
        │                   │   ├── MenuEntity.java
        │                   │   ├── RoleEntity.java
        │                   │   ├── UserEntity.java
        │                   │   ├── UserRoleEntity.java
        │                   │   └── RolePermissionEntity.java
        │                   ├── mapper
        │                   │   ├── DeptMapper.java
        │                   │   ├── MenuMapper.java
        │                   │   ├── RoleMapper.java
        │                   │   ├── UserMapper.java
        │                   │   ├── UserRoleMapper.java
        │                   │   └── RolePermissionMapper.java
        │                   ├── service
        │                   │   ├── DeptService.java
        │                   │   ├── MenuService.java
        │                   │   ├── RoleService.java
        │                   │   └── UserService.java
        │                   └── util
        │                       └── DataPermissionUtil.java
        └── resources
            ├── db
            │   ├── schema.sql
            │   └── data
            │       ├── 00_iam_dept.sql
            │       ├── 01_iam_role.sql
            │       ├── 02_iam_user.sql
            │       ├── 03_iam_menu.sql
            │       ├── 04_iam_user_role.sql
            │       └── 05_iam_role_menu.sql
            └── mapper
                └── iam
                    ├── DeptMapper.xml
                    ├── MenuMapper.xml
                    ├── RoleMapper.xml
                    └── UserMapper.xml

5.2 前端代码结构

frontend/apps/tagtag/src/views/modules/iam
├── dept
│   ├── data.ts
│   └── index.vue
├── menu
│   ├── FormModal.vue
│   ├── data.ts
│   └── index.vue
├── role
│   ├── data.ts
│   └── index.vue
└── user
    ├── DeptTree.vue
    ├── data.ts
    └── index.vue

6. 前端实现

前端相关代码位于 frontend/apps/tagtag/src/views/modules/iam。

功能	页面路径	描述
用户管理	`/iam/user`	用户列表、新增/编辑弹窗
角色管理	`/iam/role`	角色列表、权限分配抽屉
菜单管理	`/iam/menu`	菜单树形表格、图标选择
部门管理	`/iam/dept`	部门树形维护

7. API 参考

方法	端点	描述
POST	`/auth/login`	用户登录 (返回 JWT)
GET	`/menus/routes`	获取当前用户的动态路由
GET	`/menus/tree`	获取菜单树形结构
GET	`/users`	获取用户列表
POST	`/users`	创建新用户
PUT	`/users`	更新用户信息
DELETE	`/users`	删除用户
GET	`/roles`	获取角色列表
POST	`/roles`	创建新角色
PUT	`/roles`	更新角色信息
DELETE	`/roles`	删除角色
GET	`/roles/permissions`	获取角色权限
POST	`/roles/permissions`	分配角色权限
GET	`/depts/tree`	获取部门树形结构
POST	`/depts`	创建新部门
PUT	`/depts`	更新部门信息
DELETE	`/depts`	删除部门