加入收藏 | 设为首页 | 会员中心 | 我要投稿 李大同 (https://www.lidatong.com.cn/)- 科技、建站、经验、云计算、5G、大数据,站长网!
当前位置: 首页 > 综合聚焦 > 服务器 > 安全 > 正文

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

发布时间:2020-12-17 17:46:02 所属栏目:安全 来源:网络整理
导读:我想在用户点击退出按钮后重新加载我的Angular 2应用程序,也就是说我要清理应用程序中的所有当前数据并从服务器加载登录表单. 现在,点击退出按钮后,我在订阅方法中得到了服务器的答案(在其中有登录表单),但我不知道如何清理当前应用程序的数据并加载登录表单
我想在用户点击退出按钮后重新加载我的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');
  }
}

这是我调用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(…)方法中从服务器获取此页面,但我不知道如何卸载当前页面(app)并让浏览器加载此页面.

解决方法

感谢大家试图帮助我.你真好.

@GünterZ?chbauer,非常感谢你.你的第三个链接:

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

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

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

代替:

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

现在我的应用程序正常工作.

非常感谢你.

(编辑:李大同)

【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容!

    推荐文章
      热点阅读