Angular根据登录用户角色动态配置表格列的实现方案

不需要单独定义第二个columns2数组，更合理的做法是给原有列配置添加角色权限关联字段，再根据当前登录用户的角色动态筛选出可显示的列，既便于维护，也能灵活适配多角色场景。

具体实现步骤： #

1. 改造原有列配置数组
   给每个列对象添加allowedRoles字段，指定该列允许显示的角色列表。公共列设为包含所有角色的数组，专属列只设置对应角色即可：

   // 组件内的列配置
   originalColumns = [
     { key: 'id', label: 'ID', allowedRoles: ['admin', 'user', 'editor'] }, // 公共列
     { key: 'name', label: '名称', allowedRoles: ['admin', 'user', 'editor'] }, // 公共列
     { key: 'operationLog', label: '操作日志', allowedRoles: ['admin'] }, // admin专属列
     { key: 'editPermission', label: '编辑权限', allowedRoles: ['editor', 'admin'] }, // 多角色共享专属列
     { key: 'viewCount', label: '浏览量' } // 无allowedRoles则默认所有角色可见
   ];
   

2. 获取当前用户角色
   从你的权限服务（比如AuthService）中获取当前登录用户的角色信息：

   currentUserRole: string | string[];
   
   constructor(private authService: AuthService) {
     // 假设返回单个角色，多角色场景则返回数组
     this.currentUserRole = this.authService.getCurrentUser().role;
   }
   

3. 编写列筛选方法
   根据用户角色筛选出符合条件的列：

   getDisplayColumns(): any[] {
     return this.originalColumns.filter(column => {
       // 未设置allowedRoles的列默认显示
       if (!column.allowedRoles) return true;
       // 兼容单角色/多角色用户场景
       return Array.isArray(this.currentUserRole) 
         ? this.currentUserRole.some(role => column.allowedRoles.includes(role))
         : column.allowedRoles.includes(this.currentUserRole);
     });
   }
   

4. 模板中使用筛选后的列
   在表格模板里直接调用方法渲染列：

   <table>
     <thead>
       <tr>
         <th *ngFor="let col of getDisplayColumns()">{{ col.label }}</th>
       </tr>
     </thead>
     <tbody>
       <tr *ngFor="let item of dataList">
         <td *ngFor="let col of getDisplayColumns()">{{ item[col.key] }}</td>
       </tr>
     </tbody>
   </table>
   

额外说明 #

如果角色逻辑复杂（比如角色层级、权限继承），可以把筛选逻辑封装到独立的权限服务中，让组件更简洁。也可以把列配置放到单独的常量文件里，方便统一管理所有页面的列权限规则。

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