I have a token-based API that expires after 10 minutes of user inactivity. When the token is changed due to idle time, an error response is received from the API and the user is redirected to the login page.
Currently, when the user logs in again, they are redirected to the main page. However, I want the user to be able to log back into the same page they were on before.
Is it possible to use sessions to store the active router value so that after the session expires, the user can navigate back to the exact location they left off?
For testing purposes, I have created an application on Stackblitz, where I simulate timeout navigation to the login page after 10 seconds.
For example, if the user clicks login, goes to the user page, then navigates to the dashboard component, but is redirected to the login page after 10 seconds, I want them to return to the dashboard component upon logging in again.
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'])
}
Please suggest the best approach for handling router navigation after the session expires. Link to edit Stackblitz