How to restart Angular 2 application after user logout

Question

I want to restart my Angular 2 application after the user clicks the logout button, that is, I want to clear all current data in the application and download the sign form from the server.

Now, after clicking the exit button, I get a response from the server (with a form icon in it) in my subscription method, but I don’t know how to clear the current application data and load the login form.

Can someone help me?

This is my main class 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); }); } } 

This is my service. I am sending a logout request.

 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'); } } 

And this is my component from which I call the logout method.

 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 '); }); } } 

When I load the first page of the application for the first time (I send a request to localhost: 3000), the server checks if I have been checked, and if not, it redirects me to the localhost: 3000 / signin page. After authentication, the server sends me the main page: localhost: 3000

When I send an exit request, the server logs out and sends a response with the address localhost: 3000 / signin, because I'm not already registered.

I get this page from the server in my logout (...) method. subscribe (...), but I don’t know how to unload the current page (application) and force the browser to load this page.

Answer 1

Thanks to everyone for helping me. This is very similar to you.

@ GünterZöchbauer, thank you very much. Your third link:

The approach shown in How to reload a page using Javascript? should also work, but is not safe for WebWorker.

gave me the correct answer. I changed the logout () method to:

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

instead:

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

and now my application is working correctly.

Thank you very much.

Answer 2

Update

.dispose() destroy() since beta .16

original

I have not tried this myself, but the solution mentioned at https://github.com/angular/angular/issues/7009 seems promising

@ rizwanhussain-vteams to reset the application, you can save an instance of ComponentRef, which is allowed by promising that bootstrap will return.

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

That way, you can call the dispose method of the ComponentRef (appRef) instance to destroy the component, and then you can load it again.

This discussion may also be interesting https://github.com/angular/angular/issues/7429

The approach shown in How to reload a page using JavaScript? should also work, but is not safe for WebWorker.

Answer 3

I found that the following post was useful, and I confirm that it works before Angular 8 beta 10

Reset Angular 2 Application

What is useful to do is create a real login screen, because when you reload the application, the logout button () stops for a few seconds.