时间戳

首页 > 解决方案 > 会话过期后导航到同一个组件

angular - 会话过期后导航到同一个组件

问题描述

我有一个基于令牌的 API，如果用户空闲超过 10 分钟，会话有效期为 10 分钟，令牌将被更改，并且将从 API 收到错误响应，用户将被重定向到登录页面。

目前，如果用户再次登录，它会重定向到主页，但我的要求是用户应该能够登录到他之前离开的同一页面。

我可以使用一些会话来存储用户处于活动状态的路由器的值，并且在会话终止后我可以使用相同的会话值并导航到他离开的同一页面吗？

对于模拟，我创建了一个应用程序Stackblitz，我在其中使用 setTimout 函数并在 10 秒后导航到登录页面。

假设说用户单击登录它重定向到用户页面并从那里导航到仪表板组件 10 秒后它重定向到登录页面如果我再次单击登录它想要导航到用户离开的同一个组件

登录页面

<div id="login">
        <div class="container">
            <div id="login-row" class="row justify-content-center align-items-center">
                <div id="login-column" class="col-md-6">
                    <div id="login-box" class="col-md-12">
                        <form id="login-form" class="form" action="" method="post">
                            <h3 class="text-center text-info">Login</h3>
                            <div class="form-group">
                                <label for="username" class="text-info">Username:</label><br>
                                <input [(ngModel)]= "userName" type="text" name="username" id="username" class="form-control">
                            </div>
                            <div class="form-group">
                                <label for="password" class="text-info">Password:</label><br>
                                <input [(ngModel)]= "password" type="password" name="password" id="password" class="form-control">
                            </div>
                            <div class="form-group">
                                <input type="submit" (click)="formValidation()" name="submit" class="btn btn-info btn-md" value="submit">
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>

登录组件.ts

formValidation(){
    console.log(this.userName);
    console.log(this.password);
    this.router.navigate(['user'])
  }

建议我在会话终止后处理路由器导航的更好方法。链接以编辑Stackblitz

标签： angulartypescript

解决方案

我正在这样做。当从 api 收到错误响应时，我将用户重定向到登录页面 this.router.navigate(['/login'], { queryParams: { returnUrl: state .url }});

（“ state ”是来自@angular/router 的RouterStateSnapshot）

在登录页面上，我从查询中获取返回 url：

this.returnUrl = this.route.snapshot.queryParams['returnUrl'];

（“路由”是来自@angular/router 的ActivatedRoute）

并在成功登录时重定向用户： this.router.navigate([this.returnUrl]);

（“路由器”是来自@angular/router 的路由器）

推荐阅读