4角：どのように再ログインダイアログ/モーダルを表示するようにintercepterから

Question

問題なステートメント

私は角4に非常に新しいですし、トークンの有効期限が切れたときに、ユーザーに再ログを取得する方法を見つけるのに苦労。

は

私はアプリケーションがあまりにもすべてcomponentとしてモジュール化され を知らせる401エラー

intercept(request: HttpRequest<any>, next: HttpHandler): 
    Observable<HttpEvent<any>> { 

    return next.handle(request).do(
     // success responses 
     (event: HttpEvent<any>) => { 
     if (event instanceof HttpResponse) { 
      // I do not want to do anything here... just pass 
     } 
     }, 
     // error responses 
     (err: any) => { 
     if (err instanceof HttpErrorResponse) { 
      if (err.status === 401) { 
      //here is where I need to show a modal 
      //OH! STACKOVER-FLOW PLEASE BLESS ME 
      } 
     } 
     }); 
    } 

の応答コードをチェックresponse intercepterモジュール自体であるているコードに掘ることができます。例のように：Login Componentはモジュールそのものであり、Registrationですルートを使用してルートモジュールに含まれる別のモジュール...

この謎を解決するためのベストプラクティスを教えてください。

Answer 1

私はAngular4 CanActivateを使用してユーザーがログインしているかどうかを確認していますが、あなたのアプローチと同じ方法で動作すると思います。 とにかくあなたcanActivateサービスやあなたのフックの内側に、私は2つのソリューション見ることができます：@Sajalが述べたように

1） - ブロードキャストイベント：

@Injectable() 
export class YourService { 

    heyStopRightThere: EventEmitter<boolean> = new EventEmitter(); 
    intercept(request: HttpRequest<any>, next: HttpHandler): 
     Observable<HttpEvent<any>> { 

    ... 
       if (err.status === 401) { 
        this.heyStopRightThere.emit(); 
       } 
    ... 
     } 
} 

し、すべてのセキュリティで保護されたコンポーネントで

constructor(
     private _yrSvc: YourService 
     ) { 
    } 

    showLoginDialog() { 
     //enable component LoginDialog that embeded in 
     // <loginDialog *ngIf="notLoggedIn"></loginDialog> 
    } 
    ngOnInit() { 
     this._yrSvc.heyStopRightThere.subscribe(() => 
      showLoginDialog() 
     ); 
    } 

2）パラメータをコールバックにリダイレクトする：

@Injectable() 
export class YourService { 
    constructor(private router: Router){} 
    intercept(request: HttpRequest<any>, next: HttpHandler): 
     Observable<HttpEvent<any>> { 
     ... 
      if (err.status === 401) { 
       this.router.navigate(['/login', {callback: location.href}]); 
      } 
     ... 
    } 

ログインコンポーネントを使用すると、ダイアログが表示され、成功すると「コールバック」にリダイレクトされます。