javascript - 在 Chrome 中选择 "Open Link in New Tab"选项时，应用程序路由重定向到 Angular 应用程序中的登录

Question

我在我的 Angular 2 应用程序中发现了一个问题，我正在尝试解决这个问题。目前，当我单击整个应用程序中的链接时，我的路由按预期工作。这是一个如何在我的根路由文件中定义路由路径的示例:

{ path: 'home', component: HomeComponent, canActivate: [AuthGuard], data: {contentId: 'home-page'} },
{ path: 'contacts', component: ContactsComponent, canActivate: [AuthGuard], data: {contentId: 'contacts-page'} },

但是，如果在单击链接以路由到应用程序中的不同组件时，如果我还右键单击鼠标并选择“在新选项卡中打开链接”，那么当新选项卡打开时，会发生什么加载正确的组件后，页面将重定向到登录。同样，只有当我在 Chrome 中选择“在新标签页中打开链接”选项时才会发生这种情况。

我的登录组件的路由如下所示:

{ path: 'login', component: LoginComponent },

为了进一步澄清，我在根路由文件中的唯一重定向逻辑是在无法识别路由时处理到 home 组件的重定向:

{ path: '**', redirectTo: 'home' }

这是“联系人”链接的示例 - 这是上面列出的路由之一: http://localhost:4200/contacts

这是默认浏览器的问题吗？这是默认的 Angular 问题吗？只是想知道我是如何追踪到这个问题的。

顺便说一下，我认为这可能是 AuthGuard 问题，但即使我从“联系人”链接中删除 AuthGuard 保护，在新选项卡中打开时仍会重定向到登录组件。

这是我的登录组件的样子:

    constructor(private router: Router,
                private route: ActivatedRoute,
                private authenticationService: AuthenticationService,
                private alertService: AlertService,
                private idle: Idle)
    {}

    ngOnInit()
    {
        // reset login status
        this.authenticationService.logout();

        // get return url from route parameters or default to '/'
        this.returnUrl = this.route.snapshot.queryParams['returnUrl'] || '/';
    }

    login(response)
    {
        this.loading = true;
        this.authenticationService.login(this.model.username, this.model.password)
            .subscribe(
                data =>
                {
                    this.router.navigate(['/']);
                    this.reset();
                },
                error =>
                {
                    this.alertService.error(error, response);
                    this.loading = false;
                });
        this.authenticationService.username = this.model.username;
    }

    reset()
    {
        this.idle.watch();
        this.idleState = '';
        this.timedOut = false;
    }
}

此处调用的 authenticationService 的相关代码如下所示:

login(username: string, password: string)
{
    const u = encodeURIComponent(username);
    const p = encodeURIComponent(password);
    return this.http.post(this.url + this.ver + '/' + 'staff/login/' + u + '/' + p + '?' + this.key, {})
        .map((response: Response) =>
        {
            const user = response.json();
            if (user && (response.status = 200))
            {
                sessionStorage.setItem('currentUser', JSON.stringify(user));
                console.log('User ' + this.username + ' successfully authenticated with API');

                // Track active user id
                this._userId = user.data._id;

                // Trigger login change
                this.change.emit(this);
            } else
            {
                console.log('User ' + this.username + ' not recognized by API');
            }
        });
}

isAuthenticated()
{
    if (sessionStorage.getItem('currentUser'))
    {
        return true;
    } else
    {
        return false;
    }
}

logout()
{
    // remove user from local storage to log user out
    sessionStorage.removeItem('currentUser');
    console.log('User successfully logged out');

    // Reset active user
    this._userId = undefined;

    // Trigger event
    this.change.emit(this);

}

Answer 1

评论中讨论的答案:在您的 AuthenticationService 中，将 sessionStorage 更改为 localStorage。 sessionStorage 仅在选项卡的生命周期内持续存在。

引用:https://blog.guya.net/2015/06/12/sharing-sessionstorage-between-tabs-for-secure-multi-tab-authentication/