Modal /セレクタでCanActivateする

Question

現在、私はアプリケーションの認証サービスを行っています。このサービスは、バックエンドによって生成されたトークンで動作します。今のように、トークンが期限切れになると、ユーザーはログインページにリダイレクトされます。しかし、私はそれがユーザーをリダイレクトしない代わりに、ユーザーがその情報を入れるログインモードを呼び出すソリューションを実装したいと思います。 現在のコードのスニペットを示します。

import { Injectable } from '@angular/core'; 
import { Router, CanActivate } from '@angular/router'; 
import { AuthenticationService } from './authentication.service'; 

@Injectable() 
export class AuthGuard implements CanActivate { 
    constructor(private router: Router, private authenticationService: AuthenticationService) { 
    } 

    canActivate() { 
     try { 
      if (this.authenticationService.loggedIn()) { 
       return true; 
      } 
     } catch (error) { 
      console.log(error); 
     } 
     this.router.navigate(['/login']); 
     return false; 
    } 
} 

私はログインモードで別のコンポーネントを持っています。

@Component({ 
    selector: 'login-modal', 
    templateUrl: './login-modal.component.html', 
    styles: [] 
}) 

は基本的に私が何をしたいのかselector: 'login-modal'で、LoginModalComponentにthis.router.navigate(['/login'])の使用方法を変更します。 LoginModalComponentを呼び出すには、CanActivateメソッドを変更するにはどうすればよいですか？

ブートストラップ4を使用するこの問題の解決策を見ました。しかし、私のアプリケーションはBootstrap 3を使用しているため、実装できません。

Answer 1

あなたはいくつかのオプションを持っていますが、ここではいくつかの提案です：

• はログインを開いて、あなたからナビゲートしているページにハングアップするために、別のページに移動しますexpection。
• ログインコンポーネントを受け取り、ルートガードに約束または観測可能なものを返すモーダルサービスを用意してください。
• には、アプリケーションレベルでのログインモーダルと、ルートガードからのサービスを開くサービスがあります。

私は、あなたが元に戻ってきたかどうかを解決したときに知っておくことを、ガードに約束することを基本的にお勧めします。

希望すると便利です。