在 Angular 2 应用程序注销之前获取上次活动 URL

Question

在我的 Angular 2 应用程序中，我试图将最后一个活动的 URL prior 存储到注销的用户，以便 url 可以重新在用户重新登录后加载。但是，这被证明是有问题的。从我的 authenticationService 考虑这个注销功能：

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？我错过了什么？我怎样才能立即在之前 url 注销并重定向到“/login”？

编辑：根据评论者的建议，我尝试分配给 localStorage 而不是局部变量，如下所示：

logout() { localStorage.setItem('returnUrl', JSON.stringify(this.router.routerState.snapshot['url'])); this.apiService.logout(); }

但是当我用 localStorage.returnUrl 挖掘那个值时，我仍然得到“/login”。

Answer 1

同步发生。但是，您正在记录一个对象指针。当您查看控制台中的对象时，它已经发生变化，因为路由已更改。我建议使用本地存储来存储路由器快照。这不会有您在控制台中看到的相同指针问题。

Answer 2

首先，非常感谢@Sam 的 localStorage 建议。我早该想到的。所以，最后，我需要做的就是在我的 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 2 应用程序注销之前获取上次活动 URL

Getting Last Active URL Prior to Logout in Angular 2 App

javascript

angular

typescript

routing

synchronous