使用 Angular 中的角色过滤网站数据答案

【问题标题】：Filter website data using roles in Angular使用 Angular 中的角色过滤网站数据
【发布时间】：2019-11-11 09:02:22
【问题描述】：

我想通过 Spring Security 和 Spring Boot 在 Angular SPA 应用程序（一切都在客户端运行）中使用登录角色。当添加用户角色以限制例如显示数据时有经验的开发者能否根据角色编辑限制数据的代码，并显示违反角色限制的限制代码？

有什么方法可以防止这种情况并保护代码吗？

【问题讨论】：

标签： angular spring typescript spring-boot angular7

【解决方案1】：

试试这个：

您必须创建一个自定义结构指令roleType，它将根据用户的角色类型显示和隐藏数据。

Stackblitz demo

roletype.directive.ts

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

@Directive({
  selector: '[roleType]'
})
export class RoleTypeDirective {

  constructor(private templateRef: TemplateRef<any>, private vcRef: ViewContainerRef, private dataService: DataService) {

  }

  currentRoleType: string = this.dataService.currentRoleType;

  @Input() set roleType(roleType: string) {
    if (roleType.includes(this.currentRoleType)) {
      this.vcRef.createEmbeddedView(this.templateRef);
    }
    else {
      this.vcRef.clear();
    }
  }
}

HTML

<button *roleType="'AMU'">View</button>
<button *roleType="'AM'">Edit</button>
<button *roleType="'A'">Delete</button>

其中 A- Admin、M- Moderator 和 U-代表用户。

【讨论】：