Angular9集成Spring Security角色权限：普通用户可见删除按钮的解决方法

首先得明确：Thymeleaf的sec:authorize是服务器端渲染时执行的权限判断，但Angular是前端单页应用，浏览器根本不认识这个指令，自然不会帮你隐藏删除链接——这就是为什么ROLE_USER能看到它的原因。

要在Angular里实现类似的权限控制，我们需要用Angular自己的方式来处理，下面提供两种可行方案：

方案一：组件内直接判断（快速实现） #

先在你的组件类里添加一个判断角色的方法，前提是你已经有一个Auth服务（比如AuthService）用来存储当前登录用户的信息（包括角色列表）：

// 组件类代码
import { AuthService } from './path-to-auth.service';

constructor(private authService: AuthService) {}

hasRole(targetRole: string): boolean {
  // 从AuthService获取当前用户的角色列表，这里假设你的用户对象有roles属性
  const currentUserRoles = this.authService.currentUser?.roles || [];
  // 匹配目标角色（注意Spring Security的角色通常带ROLE_前缀，要和后端保持一致）
  return currentUserRoles.includes(targetRole);
}

然后在HTML模板里用*ngIf替代Thymeleaf的指令：

<li *ngFor="let user of users"> 
  {{user.username}} ({{user.firstName}} {{user.lastName}}) - 
  <a *ngIf="hasRole('ROLE_ADMIN')" (click)="deleteUser(user.userid)" class="text-danger">Delete</a> 
</li>

方案二：自定义结构型指令（复用性更强） #

如果你的应用多个地方都需要做角色判断，推荐封装一个自定义指令，就像Thymeleaf的sec:authorize一样通用：

1. 创建HasRoleDirective：

import { Directive, Input, TemplateRef, ViewContainerRef } from '@angular/core';
import { AuthService } from './auth.service';

@Directive({
  selector: '[appHasRole]' // 自定义指令的选择器
})
export class HasRoleDirective {

  constructor(
    private templateRef: TemplateRef<any>, // 要渲染的模板内容
    private viewContainer: ViewContainerRef, // 模板的容器
    private authService: AuthService
  ) { }

  // 接收传入的角色参数
  @Input() set appHasRole(targetRole: string) {
    const currentUserRoles = this.authService.currentUser?.roles || [];
    const hasPermission = currentUserRoles.includes(targetRole);
    
    if (hasPermission) {
      // 有权限则渲染模板
      this.viewContainer.createEmbeddedView(this.templateRef);
    } else {
      // 无权限则清空容器（不渲染）
      this.viewContainer.clear();
    }
  }
}

2. 在你的NgModule里声明这个指令：

import { HasRoleDirective } from './path-to-has-role.directive';

@NgModule({
  declarations: [
    // ...其他组件/指令
    HasRoleDirective
  ]
})
export class YourModule { }

3. 然后在HTML里直接使用：

<li *ngFor="let user of users"> 
  {{user.username}} ({{user.firstName}} {{user.lastName}}) - 
  <a *appHasRole="'ROLE_ADMIN'" (click)="deleteUser(user.userid)" class="text-danger">Delete</a> 
</li>

重要提醒 #

前端的UI隐藏只是提升用户体验，绝对不能替代后端的权限校验！你必须在Spring Security的后端接口（比如删除用户的API）上也加上@PreAuthorize("hasRole('ROLE_ADMIN')")注解，防止用户通过直接调用API的方式绕过前端限制执行删除操作。

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