Angular ag-grid如何根据权限条件渲染表头与列

核心逻辑基于ag-grid列定义的特性，复用你现有UserService的权限校验能力，和原有自定义指令的权限逻辑完全对齐，有两种常用实现方式：

方案1：静态过滤列定义（推荐，适配90%场景） #

适合用户权限在页面生命周期内不会变更的场景，直接过滤列定义数组即可，无需额外监听逻辑：

1. 先给需要权限控制的列增加自定义属性标记所需权限

import { ColDef } from 'ag-grid-community';
import { SensitiveAccessPermission } from '你的权限常量路径';

// 全量列定义
const ALL_COLUMNS: ColDef[] = [
  { headerName: '', field: '' },
  { headerName: 'Name', field: 'name', filter: true },
  // 给敏感列增加所需权限标记
  { headerName: 'Modified by', field: 'modifiedBy', filter: true, requiredPermissions: [SensitiveAccessPermission] },
  { headerName: 'Modified date', field: 'modified', filter: true, requiredPermissions: [SensitiveAccessPermission] },
  { headerName: 'Active', field: 'isActive', filter: true, requiredPermissions: [SensitiveAccessPermission] },
];

2. 组件初始化时根据权限过滤最终使用的列定义

import { Component, OnInit, OnDestroy } from '@angular/core';
import { UserService } from '你的UserService路径';
import { takeUntil } from 'rxjs';
import { Subject } from 'rxjs';

@Component({
  // 你的组件原有配置
})
export class YourComponent implements OnInit, OnDestroy {
  private destroy$ = new Subject<void>();
  columnDefs: ColDef[] = [];
  rowData: any[] = []; // 你的用户列表数据

  constructor(private userService: UserService) {}

  ngOnInit() {
    this.userService.userHasAnyPermissions([SensitiveAccessPermission])
      .pipe(takeUntil(this.destroy$))
      .subscribe(hasSensitivePermission => {
        // 过滤列：无权限时移除带requiredPermissions标记的列
        this.columnDefs = ALL_COLUMNS.filter(col => {
          const requiredPerms = col['requiredPermissions'];
          // 无权限要求的列直接保留
          if (!requiredPerms) return true;
          // 校验权限，支持和原指令一致的反向控制逻辑，可扩展permissionReverse自定义属性
          return hasSensitivePermission;
        });
      });
  }

  ngOnDestroy() {
    this.destroy$.next();
    this.destroy$.complete();
  }
}

方案2：动态控制列显隐 #

适合用户权限可能在页面停留期间动态变更的场景，通过ag-grid的列API控制显隐，无需重新生成列定义：

1. 保留全量列定义，在grid就绪时保存列API实例

const ALL_COLUMNS: ColDef[] = [
  { headerName: '', field: '' },
  { headerName: 'Name', field: 'name', filter: true },
  { headerName: 'Modified by', field: 'modifiedBy', filter: true },
  { headerName: 'Modified date', field: 'modified', filter: true },
  { headerName: 'Active', field: 'isActive', filter: true },
];

// 组件内代码
private gridColumnApi: any;

onGridReady(params) {
  this.gridColumnApi = params.columnApi;
  // 首次加载时同步权限状态
  this.syncColumnVisibility();
}

2. 封装权限同步方法，权限变更时调用即可

private syncColumnVisibility() {
  if (!this.gridColumnApi) return;
  this.userService.userHasAnyPermissions([SensitiveAccessPermission])
    .pipe(takeUntil(this.destroy$))
    .subscribe(hasPermission => {
      const sensitiveColumns = ['modifiedBy', 'modified', 'isActive'];
      sensitiveColumns.forEach(field => {
        this.gridColumnApi.setColumnVisible(field, hasPermission);
      });
    });
}

扩展说明 #

如果需要复用原指令的反向权限控制能力，只需要给列定义增加permissionReverse自定义属性，权限判断逻辑和原指令保持完全一致即可：

// 列定义示例
{ headerName: 'Active', field: 'isActive', filter: true, requiredPermissions: [SensitiveAccessPermission], permissionReverse: true }

// 判断逻辑
return (hasPermission && !col['permissionReverse']) || (!hasPermission && col['permissionReverse']);

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