Is there a way for Ionic to remember the last page for a few seconds before session expiry?

I have set the token for my application to expire after 30 minutes, and I have configured the 401/403 error handling as follows:

// Handling 401 or 403 error
async unauthorisedError() {
const alert = await this.alertController.create({
  header: 'Session has expired',
  message: 'Click OK to login again',
  buttons: [
    {
    text: 'OK',
    role: 'cancel',
    cssClass: 'secondary',
    handler: close => {
      console.log('close unauthorized');
      this.storage.clear();
      this.authenticationService.login();
      this.open = false;
       // do nothing else
    }
  }
]
 });

alert.present();
}

After the user logs back in, they should be redirected straight to the homepage. However, there seems to be a delay of 1-3 seconds where the app reverts back to the previous screen before redirecting.

Is there a way to prevent this brief reverting behavior, or is it just the code catching up with itself?

Any suggestions would be appreciated. Thanks!

Answer №1

Within our application, we follow a similar approach by utilizing an interceptor. In the event that the user receives a 401 or 403 error code, they are automatically redirected back to the login page. This allows for displaying any relevant messages and helps in resolving any potential "memory" problems.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Transform URL in AngularJS Service

An issue I'm facing with the app I'm developing is that users need to be able to change the IP address of the server where the REST API is hosted. The challenge lies in the fact that while the address is stored in a variable that can be changed, ...

Retrieve input from text field and showcase in angular 6 with material design components

Take a look at the output image . In the code below, I am displaying the contents of the messages array. How can I achieve the same functionality with a text box and button in an Angular environment? <mat-card class="example-card"> <mat-car ...

Collect the GET parameters as an array of strings when there is only one value

How can I properly pass a string array as a parameter for a GET call? // Passing one value param: filters=Something value: filters: 'Something' // Passing multiple values param: filters=Something&filters=Something else value: filters: [ &ap ...

What are the steps to connecting incoming data to an Angular view utilizing a reactive form?

Hello, I am currently fetching data from an API and have successfully displayed the teacher values. However, I am unsure of how to utilize the incoming array values for "COURSES" in my Angular view. This is the response from the REST API: { "courses ...

Changing the default component prefix in Angular to prevent TSLint warnings

When I create a new Angular 2 app with Angular CLI, the default component prefix is set to app-root for the AppComponent. However, if I decide to change the selector to something different like "abc-root", @Component({ selector: 'abc-root', ...

Exploring alternative applications of defineModel in Vue 3.4 beyond just handling inputs

The examples provided for defineModel in the Vue documentation primarily focus on data inputs. I was curious if this functionality could be utilized in different contexts, potentially eliminating the need for the somewhat cumbersome props/emit approach to ...

Having trouble reading JSON file with Angular 4's async pipe?

Currently, I am in the process of working on a demo for Async pipe. One of the methods called is supposed to retrieve data from a JSON file containing information about books. Unfortunately, I am encountering a 404 error when attempting to access the JSON ...

Creating a large and spacious modal in Angular using ngx-bootstrap

I need help with resizing the ngx-modal to cover a large area of the screen. Currently, I am trying to make it so that when something is clicked, the modal should overlay an 80% width grid on a full desktop screen. Despite my attempts at using .modal-xl an ...

Adding an external JavaScript library to a gateway project: A step-by-step guide

I've been attempting to integrate the Simpl5 JavaScript library into my gateway, but I have encountered some issues. I placed SIPml-api.js and SIPml.js in the webapp/content/scripts directory. In .angular-cli.json, I updated the scripts array as follo ...

SlidingPane header in React disappearing behind Nav bar

Here is the code snippet from my App.js file: export class App extends React.Component { render() { return ( <BrowserRouter> <NavigationBar /> <Routes /> </BrowserRout ...

Angular2 - Utilizing Promises within a conditional block

I'm currently facing an issue where I need to await a response from my server in order to determine if an email is already taken or not. However, I am struggling to achieve this synchronously. TypeScript is indicating that the function isCorrectEmail( ...

lines stay unbroken in angular

I am encountering an issue when I execute the following code: DetailDisplayer(row) : String { let resultAsString = ""; console.log(row.metadata.questions.length); (row.metadata.questions.length != 0 )?resultAsString += "Questions ...

Express is having trouble rendering the static index file

I am currently working on an Angular application, where my goal is to serve the build files from the Angular application using the dist directory in my express server. In order to achieve this, I am copying the files generated by ng build and pasting them ...

What are the advantages of using any type in TypeScript?

We have a straightforward approach in TypeScript to perform a task: function identity(arg) { return arg; } This function takes a parameter and simply returns it, able to handle any type (integer, string, boolean, and more). Another way to declare thi ...

The ngx-bootstrap tooltip arrow adapts its color to match the boundaries that it is surrounded by,

https://i.sstatic.net/Gmv9l.png I am currently utilizing ngx bootstrap tooltip in my project. My goal is to modify the color of the arrow element as demonstrated below: .tooltip.customClass .tooltip-arrow { border-right-color: white; } However, I ha ...

Moving the marker does not update the address

When the dragend event is triggered, the Getaddress function will be called in the following code: Getaddress(LastLat, LastLng , marker,source){ this.http.get('https://maps.googleapis.com/maps/api/geocode/json?latlng='+LastLat+ &apos ...

Executing a node.js function within an Angular 2 application

Currently, I am running an Angular2 application on http://localhost:4200/. Within this app, I am attempting to call a function located in a separate node.js application that is running on http://localhost:3000/. This is the function call from my Angular2 ...

Utilize the ref attribute when working with Material UI InputLabel components

Is there a way to access the ref parameter of an InputLabel from the @material-ui/core library using TypeScript? When I attempt to do so, the following code produces an error related to ref: TS2769: No overload matches this call. export class ComboBo ...

Angular web application can retrieve JSON data from a web API controller, allowing for

I'm currently utilizing ASP.NET Core on the backend and Angular on the frontend. My API delivers data in JSON format from the backend. I've set up a service to fetch the API data, but it's returning 'undefined' at the moment. emp ...

When an empty array is returned from a catch statement in an async/await method, TypeScript infers it as never

Function getData() returns a Promise<Output[]>. When used without a catch statement, the inferred data type is Output[]. However, adding a catch statement in front of the getData() method changes the inferred data type to Output[] | void. This sugge ...