角色权限控制求助：Admin/Supervisor/Student的展品编辑删除权限配置

我来帮你调整权限控制的逻辑，你的核心问题是之前的canEdit变量没有区分角色类型以及是否是用户自己创建的展品，我们可以通过一个更精准的权限判断方法来实现需求：

步骤1：定义角色映射与用户信息结构 #

首先在组件里定义清晰的角色映射常量，同时确保我们能获取到当前用户的角色列表和用户ID（用来判断展品是否是自己创建的）：

// Exhibits.component.ts
import { Component, OnInit } from '@angular/core';
// 假设你有AuthService用来获取当前用户信息
import { AuthService } from '../auth/auth.service';

// 定义角色映射常量，方便后续判断
const ROLE_MAPPINGS = {
  ADMIN: ['Administrator'],
  SUPERVISOR: ['Supervisor', 'Guest'],
  STUDENT: ['Student', 'Guest']
};

@Component({
  selector: 'app-exhibits',
  templateUrl: './exhibits.component.html',
  styleUrls: ['./exhibits.component.css']
})
export class ExhibitsComponent implements OnInit {
  currentUser: { roles: string[], id: string }; // 用户对象包含角色和ID
  exhibits: any[] = []; // 展品列表，假设每个展品有createdBy字段记录创建者ID

  constructor(private authService: AuthService) { }

  ngOnInit(): void {
    this.getCurrentUser();
    this.loadExhibits(); // 加载展品数据的方法
  }

  // 获取当前用户信息
  getCurrentUser(): void {
    // 替换成你实际获取用户的逻辑，比如从AuthService
    this.currentUser = this.authService.getCurrentUser();
  }

  // 加载展品数据
  loadExhibits(): void {
    // 替换成你实际获取展品的API请求
    this.exhibits = [
      { id: 1, title: '展品A', createdBy: 'user123' },
      { id: 2, title: '展品B', createdBy: 'user456' }
    ];
  }
}

步骤2：添加精准的权限判断方法 #

在组件里新增一个canModifyExhibit方法，用来判断当前用户是否有权限编辑/删除指定展品：

// 在ExhibitsComponent类中添加
canModifyExhibit(exhibit: any): boolean {
  // 判断是否是管理员
  const isAdmin = this.currentUser.roles.some(role => ROLE_MAPPINGS.ADMIN.includes(role));
  // 判断是否是主管
  const isSupervisor = this.currentUser.roles.some(role => ROLE_MAPPINGS.SUPERVISOR.includes(role));

  // 管理员或主管可以修改所有展品
  if (isAdmin || isSupervisor) {
    return true;
  }

  // 判断是否是学生用户
  const isStudent = this.currentUser.roles.some(role => ROLE_MAPPINGS.STUDENT.includes(role));
  // 学生仅能修改自己创建的展品
  if (isStudent) {
    return exhibit.createdBy === this.currentUser.id;
  }

  // 默认无权限
  return false;
}

步骤3：在模板中使用权限判断方法 #

修改Exhibits.component.html，用canModifyExhibit(exhibit)代替原来的canEdit变量，控制编辑/删除按钮的显示：

<!-- 展品列表循环 -->
<div *ngFor="let exhibit of exhibits" class="exhibit-item">
  <h3>{{ exhibit.title }}</h3>
  <!-- 查看按钮：所有用户都可查看，无需权限控制 -->
  <button (click)="viewExhibit(exhibit)">查看详情</button>
  <!-- 编辑按钮：根据权限判断显示 -->
  <button *ngIf="canModifyExhibit(exhibit)" (click)="editExhibit(exhibit)">编辑</button>
  <!-- 删除按钮：根据权限判断显示 -->
  <button *ngIf="canModifyExhibit(exhibit)" (click)="deleteExhibit(exhibit)">删除</button>
</div>

关键说明 #

• 确保你的展品对象包含createdBy字段（或类似字段），用来存储创建该展品的用户ID，这样学生用户才能判断是否是自己的展品
• 如果你的角色信息是从后端接口获取的，要确保currentUser.roles是正确的字符串数组格式
• 为了代码复用，你可以把权限判断逻辑抽成一个单独的PermissionService，这样其他组件也能调用相同的权限判断逻辑

内容的提问来源于stack exchange，提问作者Radiant