Javascript 在Angular 2应用程序中注销前获取最后一个活动URL
在我的Angular 2应用程序中,我试图将上次活动的URLJavascript 在Angular 2应用程序中注销前获取最后一个活动URL,javascript,angular,typescript,routing,synchronous,Javascript,Angular,Typescript,Routing,Synchronous,在我的Angular 2应用程序中,我试图将上次活动的URL存储到注销的用户,以便在用户重新登录后重新加载该URL。然而,事实证明,这是有问题的。从我的身份验证服务中考虑这个注销功能: logout() { let lastUrl = this.getActiveUrl(); console.log('Url before logout: ', lastUrl); this.apiService.logout(); } 注意这里的“lastUrl”,它调用this.g
存储到注销的用户,以便在用户重新登录后重新加载该URL。然而,事实证明,这是有问题的。从我的身份验证服务中考虑这个注销功能:
logout()
{
let lastUrl = this.getActiveUrl();
console.log('Url before logout: ', lastUrl);
this.apiService.logout();
}
注意这里的“lastUrl”,它调用this.getActiveUrl()
,如下所示:
getActiveUrl()
{
let activeUrl = this.router.routerState.snapshot['url'];
console.log('activeUrl: ', activeUrl);
return activeUrl;
}
…出现在this.apiService.logout()之前。但是,尽管如此,为“lastUrl”打印到控制台的是“/login”。但这就是我在注销后立即返回的URL
所以,请帮助我理解这一点:
如果这是同步的,为什么不在这里打印正确的URL?我错过了什么?如何在注销触发并重新定向到“/login”之前立即获取活动url
编辑:根据一位评论员的建议,我尝试分配给localStorage,而不是一个局部变量,如下所示:
logout()
{
localStorage.setItem('returnUrl', JSON.stringify(this.router.routerState.snapshot['url']));
this.apiService.logout();
}
但是当我用localStorage.returnUrl
挖掘出这个值时,我仍然得到了“/login”。它是同步发生的。但是,您正在记录一个对象指针。当您在控制台中查看对象时,它已经更改,因为路由已经更改。
我建议使用本地存储来存储路由器快照。这将不会出现与您在控制台中看到的相同的指针问题 首先,非常感谢@Sam提出的本地存储建议。我应该想到这一点。因此,最后,我所需要做的就是在AuthGuardService中使用我的canActivate()
函数中的RouterStateSnapshot,并将该值保存到localStorage。然后,我只需在重新身份验证和重新登录时检索该值以插入:
canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot)
{
// Get route content id
let contentId = Object.getPropertyValueAtPath(route, 'data.contentId');
// Store last active URL prior to logout, so user can be redirected on re-login
localStorage.setItem('returnUrl', JSON.stringify(state.url));
// DO OTHER STUFF...
}
在我的登录组件中,我只是将该值传入
login(response)
{
this.loading = true;
this.authenticationService.login(this.model.username, this.model.password, function (results)
{
if (results.data && results.ok === true)
{
this.returnUrl = JSON.parse(localStorage.getItem('returnUrl'));
this.router.navigate([this.returnUrl || '/']);
console.log('ReturnURL Value is: ', this.returnUrl);
this.reset();
}
else
{
this.alertService.error(null, response);
this.loading = false;
}
}.bind(this));
}
啊,好吧,很有趣。我会试试看,谢谢。我没有意识到分配给局部变量会导致这个问题。运气不好。同样的结果。我会把我试过的贴在上面。哦,对了。也许我弄错了。如果这不起作用,我将删除,但是您是否尝试过angular.copy创建变量的副本。实际上,我有一个想法。将尝试从我的authGuard文件保存到localStorage。这可能有用…太好了。当您导航到某个页面时,也会有防护装置。如果您将let lastUrl=this.router.routerState.snapshot['url'],我假设您正在导航;它有效吗?您可以使用路由器
而不是激活的路由
,并使用this.route.url
获取url,请参见下面我的操作。