用户注销后如何重新加载Angular 2应用程序

Question

我想在用户单击注销按钮后重新加载我的 Angular 2 应用程序，即我想清除应用程序中的所有当前数据并从服务器加载登录表单。

现在，单击注销按钮后，我在订阅方法中从服务器（其中包含登录表单）获得答案，但我不知道如何清理当前应用程序的数据并加载登录表单。

谁能帮帮我？

这是我的主类 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);
    });
  }
}

这是我的服务。我从这里发送注销请求。

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

这是我调用注销方法的组件。

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

}

当我第一次加载应用程序的主页时（我将请求发送到 localhost:3000），服务器会检查我是否通过了身份验证，如果没有，它会将我重定向到 localhost:3000/signin 页面。身份验证后，服务器向我发送主页：localhost:3000

当我发送注销请求时，服务器会注销我并返回带有 localhost:3000/signin 页面的答案，因为我还没有登录。

我在 logout(...).subscribe(...) 方法中从服务器获取此页面，但我不知道如何卸载当前页面（应用程序）并让浏览器加载此页面。

Answer 1

感谢大家试图帮助我。你真是太好了。

@GünterZöchbauer，非常感谢。您的第三个链接：

如何使用 Javascript 重新加载页面？也应该可以工作，但不是 WebWorker 安全的。

给了我正确的答案。我将 logout() 方法更改为：

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

代替：

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

现在我的应用可以正常运行了。

非常感谢。

Answer 2

更新

.dispose() 是 destroy() 从 beta.16 开始

原创

我自己没有尝试过，但https://github.com/angular/angular/issues/7009 中提到的解决方案听起来很有希望

@rizwanhussain-vteams 重置应用程序，您可以保存 ComponentRef 实例，该实例由引导程序返回的承诺解决。

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

所以你可以调用ComponentRef实例（appRef）的dispose方法来销毁组件，然后你可以再次引导它。

这个讨论可能也很有趣https://github.com/angular/angular/issues/7429

How to reload a page using JavaScript? 中显示的方法也应该有效，但不是 WebWorker 安全的。

Answer 3

我发现以下帖子很有用，并确认它适用于 Angular 8 beta 10

Resetting Angular 2 App

有用的是制作一个实际的登录屏幕，因为重新引导应用程序会使 logout() 按钮冻结几秒钟。