Question

我目前正在参与一个使用Angular和IdentityServer4身份验证服务的项目。目前，当用户首次访问我们的页面时，我们正在显示登录链接。当用户单击此链接时，会将其重定向到IdentityServer登录页面。成功登录后，用户将被重定向回我们的服务，从而可以使用新的菜单链接。

问题是存在延迟，即正在使用的OidcSecurityService库可以确定我们是否经过身份验证。在此延迟期间登录链接仍然可用，直到确认身份验证后消失。

我已经考虑过默认隐藏登录，但只显示当我们没有登录并且OidcSecurityService执行时，此链接确实可用没有任何可用的方法可以让我们知道是否已经进行了身份验证检查。

是否有建议的方法来使用初始页面显示时根本无法使用登录链接？

HTML

    <li routerLinkActive="active" class="hide"
        *ngIf="!userIsAuthorized"
        [ngClass]="{'show': showLogin, 'hide': !showLogin }">
      <a style="cursor:pointer;" (click)="onLogin()">Login</a>
    </li>

确定身份验证后，将从OidcSecurityService层激活此服务。

UserService

constructor(private securityService: OidcSecurityService,
          private userApiService: UserApiService,
          private spinnerService: SpinnerService) {

console.log('userService() start');

    //this will allow us to get the user details, needed to get the user permissions
    this.securitySubscription = this.securityService.onUserDataLoaded
      .subscribe(() => {
        console.log('loading user data');

        this.userLoadStarted.next(true);
        this.loadAllUserDetails();
    });

    //We must check the local storage and IF user details saved, use these values and emit event, else make/use empty
    var userAuthorized = this.securityService.isAuthorized;

  if (userAuthorized != undefined && userAuthorized === true) {
    console.log('userService() isw auth');

    this.userPermissions = LocalStorageService.read('userPermissions');
    this.userDetails = LocalStorageService.read('userDetails');

    this.userDetailsAlreadyLoaded = true;
  } else {
    console.log('userService() not auth');

      this.userPermissions = [];
      this.userDetailsAlreadyLoaded = false;
    }

console.log('userService() end');
}

Answer 1

使用您当前的设置，您需要将loginClicked变量添加到 UserService 。此外，最好坚持ngIf 或 ngClass，而ngIf是更可靠的方法。

<强> HTML

<li routerLinkActive="active" *ngIf="!userService.userIsAuthorized || !userService.loginClick"> <!-- Only show if the user isn't authorized or login hasn't been clicked -->
  <a style="cursor:pointer;" (click)="onLogin()">Login</a>
</li>

服务中的主要更改将包括创建loginClicked变量以管理登录过程的状态。您需要将其包含在登录API的顶部。您的代码示例中只包含构造函数，但我假设您的组件onLogin()调用此服务中的函数来初始化登录。

public userIsAuthorized = false;
public loginClick = false;

login() {
  // Your call to the login service here
  // ...
  // ...
  // This is also the area where you set userIsAuthorized to true on successful subscribe.

  this.loginClick = true;
}

我创建了this plunker，显示了它是如何工作的。

在通过Angular身份验证后隐藏菜单链接

1 个答案: