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

``I am experiencing difficulties with utilizing a personalized color scheme in React JS with Material

I'm currently working on customizing the color palette for my project, but I am only able to modify the main attribute and not others. My development environment is JavaScript with MUI, not Typescript. import './App.css'; import {BrowserRout ...

javascriptcssreactjsmaterial-ui

In React, CSS @media queries are specifically designed to function only within the Device Mode of Developer Tools

As indicated by the title, I have designed a responsive web app using the React framework along with various @media queries. When I resize the page in Developer Tools' Device Mode, the queries work perfectly fine and everything functions as expected. ...

javascripthtmlcssreactjs

How to access a controller function within a recursive directive template in Angular version 1.3?

In my parent directive, I am able to access controller functions using the $parent operator. However, this method does not work in recursive child directives. Here is a shortened example of the issue: // Sample controller code (using controllerAs):--- va ...

javascriptangularjsweb-applicationsangularjs-directivefrontend

Arranging the data in the table by alternating rows using Datatables

I need to organize my data in a way that includes an additional row for descriptive information, but this particular row should not be sorted. It is crucial for understanding the rest of the data, so hiding or showing it is not an option. Is it possible t ...

javascriptjqueryhtmldatatables

When viewing an array, the objects' values are displayed clearly; however, when attempting to access a specific value, it

I am attempting to retrieve the board_id of my objects in the columnsServer array... columnsServer: Column[]; this.service.getColumns() .subscribe(data => { this.columnsServer = data; console.log(this.columnsServer); for (this.i = 0; this.i ...

javascriptangulartypescript

Capturing any uncaught exceptions in a Node.js application

Here's my dilemma: I need to figure out how to manage all uncaught exceptions (any operational or developer errors that could bring down the entire service) for my node application. Ideally, I would like to receive an email alert whenever an error is ...

node.jsexpress

Trouble looping through Javascript

Hello, I am encountering a problem with some JavaScript code that I am trying to implement. The functions in question are as follows: var changing_thumbs = new Array(); function changeThumb(index, i, thumb_count, path) { if (changing_thumbs[index]) { ...

javascriptjquery

"Implementing ASP.NET MVC4 with Razor: Dynamically filtering a dropdown list based on the selected value from another dropdown

Currently, I am facing a challenge where I need to filter the options of a dropdown list based on the value selected from another dropdown. Within my database, there are tables containing all countries and all cities in the world, with a foreign key linkin ...

javascriptjqueryasp.net-mvcrazorhtml.dropdownlistfor

Loading time for page style can be slow when using Next Js

When the user opens or reloads the page, there is a delay in loading the style of the page. I am relatively new to working with next js and still learning the core abilities of the framework. This GIF illustrates the slow loading time when opening or relo ...

javascriptreactjswebfrontendnext.js

Using Vue.js and Laravel's permission system

Currently, I am working on the integration of Laravel Permission API with Vue.js frontend. My chosen library for Laravel Permission is from https://github.com/spatie/laravel-permission. However, I am facing a challenge in understanding how to verify perm ...

laravelvue.jsuser-permissions

Trouble Connecting Local Database with PG NPM Package

I'm encountering issues with using the pg package on my computer. I've attempted to execute the following code: var pg = require('pg'); var con_string = "postgres://user:password@localhost:5432/documentation"; var client = new pg.Clie ...

javascriptnode.jspostgresqlnpm

Determine whether a click event originated from within a child window

Currently, I am utilizing window.open to initiate a new window in javascript and my goal is to identify clicks made within the child window. Essentially, if a click event occurs in the child window, I aim to modify the parent window accordingly. I have a ...

javascriptjqueryhtml

AngularJS $scope changes not reflecting in the view

Struggling with a persistent issue in my angularJS $scope. I've been working on updating an array within a controller function, and even though the values are changing based on console logs, the view isn't reflecting those changes. Here's wh ...

javascriptangularjs

Efficiently process and handle the responses from Promise.all for every API call, then save the retrieved data

Currently, I am passing three API calls to Promise.all. Each API call requires a separate error handler and data storage in its own corresponding object. If I pass test4 to Promise.all, how can I automatically generate its own error and store the data in ...

javascriptreactjstypescriptasync-awaites6-promise

Trying out a React component that relies on parameters for connection

Having an issue while attempting to test a connected react component that requires a props.params.id in order to call action creators. During the testing process, when checking if the component is connected to the store, an error "Uncaught TypeError: Canno ...

javascriptreactjsmocha.jsreduxkarma-mocha

Incorporating Vue Component According to URL Parameters Dynamically

Is there a way to dynamically import a vue component based on a path provided in the URL parameters? For example, if <host>/<path> is entered into the browser, I would like to load a vue component located at <path>.vue. In my routes.js f ...

vue.jsroutesvue-componentvuejs3

Exploring the capabilities of using Next.js with grpc-node

I am currently utilizing gRPC in my project, but I am encountering an issue when trying to initialize the service within a Next.js application. Objective: I aim to create the client service once in the application and utilize it in getServerSideProps (wit ...

javascripttypescriptnext.jsgrpcgrpc-node

"Troubleshoot: jQuery UI accordion not functioning properly in response to

I've encountered an issue with the accordion functionality while working with dynamic data. To address this, I'm incorporating JavaScript to generate <div> and <h3> tags for the accordion. Here is the code snippet I am using: $(&ap ...

javascriptjqueryhtml

A step-by-step guide on transferring data from an HTML file to MongoDB using Python Flask

I am currently developing a web application that involves uploading multiple CSV files and transferring them to MongoDB. To build this application, I have utilized Python Flask. To test out different concepts for the application, I have created a sample f ...

javascriptjquerypythonhtmlmongodb

Tips for effectively downsizing an HTML Canvas to achieve high-quality images

Introduction I am currently facing issues with blurry visuals in my canvas animation, especially on devices with high pixel densities like mobile and retina screens. In order to address this problem, I have researched canvas down-scaling techniques and f ...

javascripthtmlcsscanvashtml5-canvas