用户注销后如何重新加载Angular 2应用
我想在用户单击注销按钮后重新加载我的Angular 2应用程序，也就是说，我想清除应用程序中的所有当前数据，并从服务器加载登录表单。
现在，在单击注销按钮后，我在subscribe方法中从服务器获得了答案(带有登录表单)，但我不知道如何清理当前应用的数据和加载登录表单。
有人能帮我吗？
这是我的主类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 ');
});
}
}当我第一次加载app的主页(我将请求发送到localhost:3000)时，服务器会检查我是否通过了身份验证，如果没有，它会将我重定向到localhost:3000/signin页面。认证后，服务器向我发送主页: localhost:3000
当我发送注销请求时，服务器会注销我并返回一个带有localhost:3000/signin页面的答案，因为我还没有登录。
我在注销(...).subscribe(...)中从服务器获得此页面方法，但我不知道如何卸载当前页面(应用程序)并让浏览器加载此页面。
回答 3
Stack Overflow用户
发布于 2016-04-03 20:40:54
感谢大家试图帮助我。你真好。
@GünterZöchbauer，非常感谢。第三个链接：
如何使用Javascript重新加载页面中显示的方法？也应该可以工作，但不是WebWorker安全的。
给了我正确的答案。我将logout()方法更改为：
logout(){
window.location.replace('/logout');
}而不是：
logout(): Observable<any>{
return this._http.get('/logout');
}现在我的应用程序可以正常工作了。
非常感谢。
Stack Overflow用户
发布于 2016-04-03 16:27:26
更新
自beta.16起，.dispose() is destroy()
原始
我自己还没有尝试过，但https://github.com/angular/angular/issues/7009中提到的解决方案听起来很有希望
@rizwanhussain vteam要重置应用程序，您可以保存ComponentRef实例，通过承诺bootstrap返回来解决此问题。
var appRef;
bootstrap(App).then((_appRef) => {
appRef = _appRef;
});dispose，因此您可以调用ComponentRef实例的dispose方法(appRef)来销毁组件，然后可以再次引导它。
这个讨论可能也很有趣，https://github.com/angular/angular/issues/7429
How to reload a page using JavaScript?中显示的方法也应该有效，但不是WebWorker安全的。
Stack Overflow用户
发布于 2019-04-09 12:26:29
我发现下面的帖子很有用，并确认它可以工作到Angular 8 beta 10
有用的是创建一个实际的登录屏幕，因为重新引导应用程序会使logout()按钮冻结几秒钟。
https://stackoverflow.com/questions/36373106
复制相似问题
腾讯云开发者
