如何在用户注销后重新加载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,非常感谢你.你的第三个链接:
给了我正确的答案.我将logout()方法更改为: logout(){ window.location.replace('/logout'); } 代替: logout(): Observable<any>{ return this._http.get('/logout'); } 现在我的应用程序正常工作. 非常感谢你. (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |
- 如何检查unix中字符串中的第一个字符
- bash – 美丽引用的命令
- 基于AngularJs + Bootstrap + AngularStrap 省市区联动实践
- 官方Angular 2 http教程中的私有变量命名约定
- 单元测试 – AngularJs:在单元测试指令时触发事件以模拟用
- angularjs – Angular:如何使用一个解决我的应用程序的所有
- bash – 如何在shell脚本中运行’cd’,并在脚本完成后留在那
- 关于.bash_profile,.bashrc和别名应写在哪里?
- bootstrap-缩略图
- 弹簧靴休息和angular2与websocket(stomp over sockjs)