Angular+ASP.NET项目校验角色声明控制navbar元素显隐问题

当前代码不生效的核心原因 #

1. UserService的isUserAdmin方法里，不管用户实际是不是管理员，都给Subject推送了固定值true，状态判定逻辑错误
2. 导航栏组件初始化时，没有主动调用isUserAdmin方法触发身份校验，Subject内无初始值，所以组件内的isUserAdmin始终停留在初始的false

修复步骤 #

1. 修正UserService的身份判定逻辑 #

将Subject推送值改为实际的管理员判定结果，同时补充token判空避免报错：

public isUserAdmin = (): boolean => {
    const token = localStorage.getItem("token");
    // 无token时直接返回非管理员
    if (!token) {
        this._adminChangeSub.next(false);
        return false;
    }
    const decodedToken = this._jwtHelper.decodeToken(token);
    const role = decodedToken['http://schemas.microsoft.com/ws/2008/06/identity/claims/role']
    const isAdmin = role === 'Admin';
    // 推送实际判定结果到订阅者
    this._adminChangeSub.next(isAdmin);
    return isAdmin;
}

2. 导航栏组件初始化时主动触发身份校验 #

在ngOnInit生命周期中调用一次身份校验方法，保证页面加载时就拿到正确的权限状态：

export class HeaderComponent implements OnInit {
  public isUserAdmin: boolean = false;
  ...
  constructor(private userService: UserService, private _router: Router) {
    this.userService.adminChanged
      .subscribe(res => {
          this.isUserAdmin = res;
      }); 
  }

  ngOnInit(): void {
    // 初始化时主动校验当前登录用户身份
    this.userService.isUserAdmin();
  }
}

3. 可选优化：用async管道简化订阅管理 #

不需要手动管理订阅，避免内存泄漏风险，修改导航栏代码如下：
组件ts代码

export class HeaderComponent implements OnInit {
  // 直接绑定服务的Observable
  public isAdmin$ = this.userService.adminChanged;
  ...
  constructor(private userService: UserService, private _router: Router) {}

  ngOnInit(): void {
    this.userService.isUserAdmin();
  }
}

模板HTML代码

<li class="nav-item">
  <a class="nav-link" *ngIf="isAdmin$ | async" routerLink="manufacturers">Manufacturers</a>
</li>

额外注意事项 #

用户登录成功、登出成功的业务逻辑后，都要调用一次this.userService.isUserAdmin()触发状态更新，保证导航栏权限状态实时同步。

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