Preventing Vue.js SPA from accessing cached version when JWT expires: the solution

I'm encountering an issue with my Vue.js / Express application that I can't seem to resolve.

Here's how the process unfolds:

An unauthenticated user logs into the app and is presented with the login page. Once successfully authenticated, the backend generates a JWT cookie and sends it along with the static content of the Vue.js page.

Subsequent calls to the REST API are made on the same backend which verifies the validity of the JWT. If the JWT has expired, the static content of the login page is returned.

Everything seems to be working fine, but when the browser is closed and reopened, sometimes the tab is left in memory. This causes issues if the JWT has expired since you end up with a cached version of the index page while the REST requests fail due to expired JWT.

In such scenarios, how can I redirect users back to the login page? Any assistance would be greatly appreciated. :)

javascriptexpressvue.jsjwt

Answer №1

After a bit of troubleshooting, I managed to resolve the issue by turning off caching on the server side :

app.use((req, res, next) => {
  res.set('Cache-Control', 'no-store, no-cache, must-revalidate, private')
  next()
})

Answer №2

One positive aspect is that when the requests fail, it prompts redirection to the login page of the front-end application based on the response.

Consider this scenario:

Request => authenticated ? index : login

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

The function `collect` cannot be found for the object #<Page:0x007f4f200a9350

Seeking assistance with an error I've encountered. As a novice, I'm still navigating my way through this, so any guidance on how to resolve it would be greatly appreciated. Attached is the portion of code that is triggering the error: 3: <%= ...

javascriptruby-on-railsrubyactioncontroller

Having trouble establishing a connection to the remote server using node js?

I have been working on integrating a third-party Recharge API. I provided them with the necessary URL, so that whenever a message is sent - whether it's a success or failure - they can update the URL accordingly. Upon checking my AWS system, everythi ...

javac#node.jsamazon-web-servicesexpress

Error: Reading the property 'any' of an undefined object resulted in a TypeError after an update operation

After updating multiple npm packages in my application, I encountered a series of errors that I managed to resolve, except for one persistent issue! TypeError: Cannot read property 'any' of undefined at Object.<anonymous> (/home/cpt/Deskto ...

javascriptreactjsnpmtypeerrorbabeljs

I aim to generate a JavaScript string that, when placed within a div tag, will display as a list

I need assistance with formatting a string that contains a list of items to display in a specific way within a div tag using JavaScript. The string has multiple items that I wish to show as a bulleted list. Here is an example of the string: const items = & ...

javascripthtmlreactjsjsx

Error: The function $scope.apply is invalid and cannot be executed

I am attempting to display the contacts list after retrieving it using rdflib.js. The data is being loaded and stored in the list within the scope. However, I am running into an issue where the $scope is not updating, and it appears that I may be calling ...

javascriptangularjs

What is the best way to delay a method in vue.js?

In the tab element called competences, there is an input field with the reference search. <ul class="nav nav-tabs" id="myTab" role="tablist"> <li class="nav-item"> <a @click="competencesTabClick" aria-controls="Company" aria-sel ...

javascriptvue.js

How can I display a Bootstrap modal in Ember.js after rendering it in an outlet?

I'm facing a challenge in my Ember.js application where I need to trigger the opening of a Bootstrap modal from my ApplicationRoute upon calling the openModal action. This is what my ApplicationRoute looks like: module.exports = Em.Route.extend({ ...

javascripttwitter-bootstrapember.js

Trigger a series of child functions upon clicking the parent button

I am facing an issue where I am attempting to trigger the functions of each child component from a button click event on the parent component. I have tried using props and setting up a new function in the componentDidMount lifecycle method, but only the la ...

javascriptreactjscomponentsparent

Navigate to a third-level nested view in Angular-UI-Router without prior knowledge of the second-level nested view

I currently have a few "parent modules", such as: user community In addition, I have "embeddable modules", including: photos videos wiki These embeddable modules can be embedded into the parent modules. Each module does not have cross dependencies. F ...

javascriptangularjsangular-ui-router

simulating the behavior of setInterval within the created hook in vue.js

I've been attempting to simulate a setInterval function within my created hook, but no matter what I try, the function doesn't seem to be triggered. I have experimented with using jest.useFakeTimers and in each test, I would utilize jest.advanceT ...

vue.jsjestjsnuxt.jsvue-test-utils

Having trouble with the post request in Express JS and Vue? Don't worry, we've got you covered

I've been following a tutorial to set up a basic app and everything is working smoothly, except for the post request which seems to be causing me trouble. Tutorial: https://www.youtube.com/watch?v=HkIGAqAP1GY Although the issue is reproducible based ...

javascriptnode.jsexpressvuejs3

The loading time for the Ajax request is unreasonably slow

I am currently managing a website dedicated to League of Legends. My main task involves requesting statistics from the Riot Games API based on a player's name, which returns the information in JSON format. However, there is a significant delay in load ...

javascriptphpjqueryjsonajax

Struggles with ajax and JavaScript arise when attempting to tally up grades

Currently, I am facing an issue with my JavaScript. The problem arises when trying to calculate marks for each correctly chosen answer based on information from the database. If an incorrect answer is selected, the marks are set to '0', otherwise ...

javascriptjqueryhtmlajax

Learn how to send data from a MySQL server to a Node.js application using Socket.IO

I've been facing a challenge recently. I am attempting to listen for events from the @rodrigogs/my-sql events node package and then emit those events through socket-io to the react client. However, there seems to be a disconnect that I can't see ...

javascriptmysqlnode.jssocket.iomysql-event

Is the server's performance improved by routing through Angular instead of using Express for routing?

I'm currently working on developing a web application and I've been thinking about using client-side JavaScript (Angular) for routing. I believe that by routing through Angular, it could potentially speed up my application by reducing the number ...

angularjsnode.jsexpress

Trouble with Chakra UI loading Images from local sources

I'm running into issues when trying to load local images using the Chakra UI library in combination with Next.js. <Image src="./homepage/footer/Black.svg" /> Here is the current folder structure: When checking my console, I see the f ...

javascriptreactjsnext.jschakra-ui

Retrieving the Short Date Format from the user's device or browser within a React application

Currently, I am in the process of utilizing reactjs along with material UI datepicker. My objective is to transmit the short date format to the datepicker component, such as format="MM/dd/yyyy". In addition, I wish to employ the pre-existing date ...

javascriptreactjsmaterial-ui

Guide on incorporating JSON information into an HTML table

Currently, I am retrieving data that needs to be added to an HTML table once it is received. I have attempted some methods, but I am unable to dynamically add the data after the page has loaded. I aim to accomplish this using either JavaScript or jQuery. ...

javascripthtmljsondomaddeventlistener

Creating a reusable field for reactive forms in Angular: A step-by-step guide

I need assistance with creating a versatile field component for reactive forms, but I am facing challenges in retrieving the value from the custom-input element. <form [formGroup]="form" (ngSubmit)="submit()"> <custom-input i ...

javascriptangularangular2-forms

Exploring the differences between req.params and req.query when working with Next.js dynamic API routes

I am perplexed by the difference in accessing params in my Next.js API routes compared to traditional express routes. In order to access a specific dynamic route ID, I find myself using req.query instead of the usual params. Is this the preferred method fo ...

javascriptnode.jsexpressnext.js