Jak ponownie załadować aplikację Angular 2 po wylogowaniu użytkownika?

Question

Chcę ponownie załadować moją aplikację Angular 2 po kliknięciu przez użytkownika przycisku wylogowania, tzn. Chcę wyczyścić wszystkie bieżące dane w aplikacji i załadować formularz logowania ze strony serwer.

Teraz, po kliknięciu przycisku wylogowania, otrzymuję odpowiedź z serwera (z formularzem w nim podpisanym) w metodzie subskrypcji, ale nie wiem, jak wyczyścić bieżące dane aplikacji i załadować formularz logowania .

Czy ktoś może mi pomóc?

To jest mój główny klasa AppComponent

import {Component}   from 'angular2/core'; 
import {OnInit}    from "angular2/core"; 
import {Router}    from "angular2/router"; 
import {RouteConfig}  from "angular2/router"; 
import {AuthRouteOutlet} from "./common/directives/auth-router-outlet.directive"; 
import {AuthService}  from "./common/services/auth.service"; 
import {DashboardComponent} from "./common/components/dashboard.component"; 

@Component({ 
    selector: 'my-app', 
    template: ` 
    <auth-router-outlet></auth-router-outlet> 
    `, 
    directives: [AuthRouteOutlet, DashboardComponent] 
}) 
@RouteConfig([ 
    {path: '/dashboard/...', name: 'Dashboard', component: DashboardComponent, useAsDefault: true} 

]) 
export class AppComponent implements OnInit { 
    constructor(
     private _router: Router, 
     private _authService: AuthService 
) {} 

    ngOnInit():any { 
    var self = this; 

    this._authService.getLoggedOutEvent().subscribe(function(next) { 
     //console.log('AppComponent OnEmit: ' + JSON.stringify(next)); 
     self._router.navigateByUrl('/', true); 
    }); 
    } 
} 

To jest mój serwis. Wysyłam żądanie wylogowania z tego miejsca.

import {Injectable, EventEmitter} from 'angular2/core'; 
import {User} from "../models/user.interface"; 
import {Http} from "angular2/http"; 
import {Observable} from "rxjs/Observable"; 
import {Headers} from "angular2/http"; 

@Injectable() 
export class AuthService { 

    private _userLoggedOut = new EventEmitter<any>(); 

    constructor(private _http: Http) {} 

    getLoggedOutEvent(): EventEmitter<any> { 
     return this._userLoggedOut; 
    } 

    logout(): Observable<any>{ 
    return this._http.get('/logout'); 
    } 
} 

I to jest mój składnik, z którego wywołuję metodę wylogowania.

import {Component} from "angular2/core"; 
import {ROUTER_DIRECTIVES, Router} from "angular2/router"; 
import {AuthService} from "../services/auth.service"; 

@Component({ 
    selector: 'mdm-header-bar', 
    template: ` 
    <header> 
     <nav id="mdm-header-bar" > 
     <ul> 
      <li><a (click)="addComponent()" title="Add component"><i class="fa fa-plus-circle"></i></a></li> 
      <li><a (click)="settings()" title="Settings"><i class="fa fa-cog"></i></a></li> 
      <li><a (click)="help()" title="Help"><i class="fa fa-question-circle"></i></a></li> 
      <li><a (click)="logout()" title="Logout"><i class="fa fa-sign-out"></i></a></li> 
     </ul> 
     </nav> 
    </header> 
    `, 
    directives: [ROUTER_DIRECTIVES] 
}) 
export class HeaderComponent { 
    constructor(private _authService: AuthService) {} 

    logout() { 
    var self = this; 
    this._authService.logout() 
     .subscribe(function(next) { 
      self._authService.getLoggedOutEvent().emit(next); 
     }, function(exception){ 
      console.log('HeaderComponent OnException: ' + exception); 
     }, function() { 
      console.log('HeaderComponent OnCompleted '); 
     }); 
    } 

} 

Kiedy załadować stronę główną app za pierwszym razem (mam wysłać wniosek do localhost: 3000), serwer sprawdza, czy ja uwierzytelnione, a jeśli nie, to przekierowuje mnie na localhost: 3000 str/internetową logowania. Po uwierzytelnieniu serwer wysyła mi stronę główną: localhost: 3000

Kiedy wysyłam żądanie wylogowania, serwer wylogowuje mnie i odsyła odpowiedź z localhost: 3000/strona logowania, ponieważ nie jestem już zalogowany.

Otrzymuję tę stronę z serwera w mojej metodzie wylogowania (...). Subscribe (...), ale nie wiem, jak zwolnić bieżącą stronę (aplikację) i pobrać przeglądarkę, aby załadować tę stronę.

Answer 1

aktualizacja

.dispose() jest destroy()od beta.16

oryginalny

nie próbowałem to sobie, ale rozwiązanie, o którym mowa w https://github.com/angular/angular/issues/7009 brzmi obiecująco

@ rizwanhussain-vteams, aby zresetować aplikację, można zapisać wystąpienie ComponentRef, który jest rozwiązany przez obietnicę, że zwraca bootstrap.

var appRef; 
bootstrap(App).then((_appRef) => { 
    appRef = _appRef; 
}); 

Więc można nazwać dysponowania metodę ComponentRef instancji (appRef) zniszczenia składnika, a następnie można bootstrap go ponownie.

Ta dyskusja może być również interesująca https://github.com/angular/angular/issues/7429

Podejście przedstawione w How to reload a page using JavaScript? powinny również działać, ale nie jest bezpieczny WebWorker.

Answer 2

Dziękuję wszystkim za próbę pomocy. To bardzo miło z twojej strony.

@ GünterZöchbauer, dziękuję bardzo.Twój trzeci link:

Podejście pokazane w Jak przeładować stronę za pomocą JavaScript? powinien również działać, ale nie jest bezpieczny w sieci Web.

dała mi właściwą odpowiedź. Zmieniłem sposób mój logout() do:

logout(){ 
    window.location.replace('/logout'); 
    } 

zamiast:

logout(): Observable<any>{ 
    return this._http.get('/logout'); 
    } 

i teraz moja aplikacja działa poprawnie.

Dziękuję bardzo.