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

Question

I have a token based API where a session is valid for 10 mins if the user is idle for more than 10 mins token will be changed and error response will be received from the API where the user will be redirected to the login page.

Currently if the user login again it redirects to the main page, but my requirement is the user should be able to login to the same page where he left before.

can i use some sessions to store the value of the router where the user is active and after the session is terminated i can use the same session value and navigate to the same page where he left?.

for a simulation i have created a application Stackblitz where i am using the setTimout function and navigating to login page after 10 seconds.

Suppose say the user clicks login it redirects to the user page and from there he navigates to dashboard component after 10 seconds it redirects to the login page if i click login again it want to navigate to the same component where user left

Login Page

<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>

Login.component.ts

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

Suggest me the better way to handle the router navigation after the session is terminated. Link to edit Stackblitz

Answer 1

I'm doing it like this. When the error response is received from api i redirect the user to login page with this.router.navigate(['/login'], { queryParams: { returnUrl: state .url }});

(" state " is RouterStateSnapshot from @angular/router)

and on the login page i get the return url from query with:

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

(" route " is ActivatedRoute from @angular/router)

and on successful login i redirect the user: this.router.navigate([this.returnUrl]);

(" router " is Router from @angular/router)

Answer 2

I have a token based API where a session is valid for 10 mins if the user is idle for more than 10 mins token will be changed and error response will be received from the API where the user will be redirected to the login page.

Currently if the user login again it redirects to the main page, but my requirement is the user should be able to login to the same page where he left before.

can i use some sessions to store the value of the router where the user is active and after the session is terminated i can use the same session value and navigate to the same page where he left ?.

for a simulation i have created a application Stackblitz where i am using the setTimout function and navigating to login page after 10 seconds.

Suppose say the user clicks login it redirects to the user page and from there he navigates to dashboard component after 10 seconds it redirects to the login page if i click login again it want to navigate to the same component where user left

Login Page

<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>

Login.component.ts

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

Suggest me the better way to handle the router navigation after the session is terminated. Link to edit Stackblitz