Implementing automatic token refreshing and automatic logout features in Vue

Question

Implementing automatic token refreshing and automatic logout features in Vue

I am a novice web developer looking to enhance my skills. For my initial project, I decided to incorporate Laravel and Vue. My main objectives are to:

Implement an auto-logout feature after 3 minutes of user inactivity
Create an automatic ping to my token at domain.com/api/refresh

In an attempt to achieve this, I wrote a function in my main.js file:

setTimeout(function() {
  window.location.href = "domain.com/logout";
}, 30000);

However, the refresh only occurs once when I reload the page. Can anyone provide guidance on how to make it work continuously? Your help is greatly appreciated :)

javascript laravel vue.js

Answer 1

Answer №1

To determine if a user is active, you can utilize events such as mousemove, mousedown, keypress, and touchdown. Implement functions to initiate and reset a timer for tracking user activity when these events occur.

In your main.js file, include the following code:

const timeoutInMS = 180000; // 3 minutes -> 3 * 60 * 1000
let timeoutId;
  
function handleInactive() {
    // Perform actions like logging out the user or refreshing the token
}

function startTimer() { 
    // Use setTimeout to initiate a timer
    timeoutId = setTimeout(handleInactive, timeoutInMS);
}

function resetTimer() { 
    clearTimeout(timeoutId);
    startTimer();
}
 
function setupTimers () {
    document.addEventListener("keypress", resetTimer, false);
    document.addEventListener("mousemove", resetTimer, false);
    document.addEventListener("mousedown", resetTimer, false);
    document.addEventListener("touchmove", resetTimer, false);
     
    startTimer();
}

Invoke the setupTimers function during page load.

NOTE: This approach offers one method to detect user inactivity.

Answer 2

To determine if a user is active, you can utilize events such as mousemove, mousedown, keypress, and touchdown. Implement functions to initiate and reset a timer for tracking user activity when these events occur.

In your main.js file, include the following code:

const timeoutInMS = 180000; // 3 minutes -> 3 * 60 * 1000
let timeoutId;
  
function handleInactive() {
    // Perform actions like logging out the user or refreshing the token
}

function startTimer() { 
    // Use setTimeout to initiate a timer
    timeoutId = setTimeout(handleInactive, timeoutInMS);
}

function resetTimer() { 
    clearTimeout(timeoutId);
    startTimer();
}
 
function setupTimers () {
    document.addEventListener("keypress", resetTimer, false);
    document.addEventListener("mousemove", resetTimer, false);
    document.addEventListener("mousedown", resetTimer, false);
    document.addEventListener("touchmove", resetTimer, false);
     
    startTimer();
}

Invoke the setupTimers function during page load.

NOTE: This approach offers one method to detect user inactivity.

Implementing automatic token refreshing and automatic logout features in Vue

Answer №1

Similar questions

Display JSON data using Vue.js

What is the best way to obtain the true dimensions of an HTML element?

What is the best method for dividing strings in javascript?

Display or conceal fields depending on custom object specifications

Attempting to extract the class name of a tr tag but receiving a result of 'undefined'

Displaying Array Information in JavaScript

Transform this JavaScript into Vue 3 code

I find the JSX syntax to be quite perplexing

Breaking apart field values in React Final Form

Having trouble getting Vue Components Styles to take effect

Simple steps to correct the npm installation of the React list filter

The functionality of window.event.target appears to be malfunctioning in the Firefox browser

Ways to display a GIF image as a pop-up during data loading in an MVC application

Navigating through Vue Router with Dynamic Imports and Guards

Is the validity of the expression !args.value || args.value.length true?

"The NextJS FetchError that occurred was due to a timeout issue (ET

Manipulate the way in which AngularJS transforms dates into JSON strings

Issue TS1259: The module "".../node_modules/@types/bn.js/index"" can only be imported as the default using the 'esModuleInterop' flag

Create a background for a dropdown list that appears unreachable, positioned above all other elements

If an element exists in one of the dimensions of a multi-dimensional array