認証後のメニューリンクを隠す角度

Question

私は現在、IdentityServer4認証サービスでAngularを使用しているプロジェクトに携わっています。現在、ユーザーが最初にページにアクセスすると、ログインリンクが表示されます。ユーザーがこのリンクをクリックすると、IdentityServerログインページにリダイレクトされます。ログインに成功すると、ユーザーはGoogleのサービスにリダイレクトされ、新しいメニューリンクが利用可能になります。

問題は、使用されている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のにloginClicked変数を追加したいと思うあなたの現在の設定を使用して

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

。また、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を作成し、これがどのように動作するかを示しています。