Laravel/Vue.js - Guard against user inactivity [token expiry] by automatically refreshing the page after an hour.

bootstrap.js

window._ = require('lodash');
window.Popper = require('popper.js').default;

/**
 * We'll load jQuery and the Bootstrap jQuery plugin which provides support
 * for JavaScript based Bootstrap features such as modals and tabs. This
 * code may be modified to fit the specific needs of your application.
 */

try {
    window.$ = window.jQuery = require('jquery');

    require('bootstrap');
} catch (e) {}

/**
 * We'll load the axios HTTP library which allows us to easily issue requests
 * to our Laravel back-end. This library automatically handles sending the
 * CSRF token as a header based on the value of the "XSRF" token cookie.
 */

window.axios = require('axios');

window.axios.defaults.headers.common['X-Requested-With'] = 'XMLHttpRequest';

window.axios.interceptors.request.use(null, error => {
    return Promise.reject(error);
});

/**
 * Intercept error 401 from axios and redirect user to login page
 */
// ES6 Modules or TypeScript
import Swal from 'sweetalert2'

window.axios.interceptors.response.use((response) => { // intercept the global error
    return response
}, function (error) {
    if (error.response.status === 401) { // if the error is 401
        // login token expired. prompt for logout
        Swal({
            title: 'ERROR 401!',
            html: 'Sorry. It seems your access token has expired <br/> or are unauthorised to access this part!',
            imageUrl: '/img/401_unauthorised_robot.png',
            imageWidth: 326,
            imageHeight: 326,
            imageAlt: 'ERROR 401 - Unauthorised Access!!',
            animation: false,
            customClass: 'animated fadeInUp',
            showCancelButton: true,
            confirmButtonColor: '#3085d6',
            cancelButtonColor: '#d33',
            confirmButtonText: 'Refresh Access Token!'
        }).then((result) => {
            if (result.value) {
                Promise.reject(error);
                return window.location = '/account/logout';
            }
        });

    }

    // Reject the error and proceed
    return Promise.reject(error)
});

/**
 * To avoid a user's token being deactivated due to inactivity,
 * we are going to start a timeout to refresh the page automatically
 */
require('./libs/inactivityGuard');

/**
 * Next we will register the CSRF Token as a common header with Axios so that
 * all outgoing HTTP requests automatically have it attached. This is just
 * a simple convenience so we don't have to attach every token manually.
 */

let token = document.head.querySelector('meta[name="csrf-token"]');

if (token) {
    window.axios.defaults.headers.common['X-CSRF-TOKEN'] = token.content;
} else {
    console.error('CSRF token not found: https://laravel.com/docs/csrf#csrf-x-csrf-token');
}

/**
 * Echo exposes an expressive API for subscribing to channels and listening
 * for events that are broadcast by Laravel. Echo and event broadcasting
 * allows your team to easily build robust real-time web applications.
 */

// import Echo from 'laravel-echo'

// window.Pusher = require('pusher-js');

// window.Echo = new Echo({
//     broadcaster: 'pusher',
//     key: process.env.MIX_PUSHER_APP_KEY,
//     cluster: process.env.MIX_PUSHER_APP_CLUSTER,
//     encrypted: true
// });

inactivityGuard.js

/**
 * Created by PhpStorm.
 * User: Lexx YungCarter
 * Date: 28/10/2018
 * Time: 21:41
 */
var timeoutID;

function setup() {
    this.addEventListener("mousemove", resetTimer, false);
    this.addEventListener("mousedown", resetTimer, false);
    this.addEventListener("keypress", resetTimer, false);
    this.addEventListener("DOMMouseScroll", resetTimer, false);
    this.addEventListener("mousewheel", resetTimer, false);
    this.addEventListener("touchmove", resetTimer, false);
    this.addEventListener("MSPointerMove", resetTimer, false);

    startTimer();
}

// start setup
setup();

function startTimer() {
    // wait 2 seconds before calling goInactive
    timeoutID = window.setTimeout(goInactive, 60000*60); // 60 s * 60 min = 1 hr;
}

function resetTimer(e) {
    window.clearTimeout(timeoutID);

    goActive();
}

function goInactive() {
    window.location.reload(true);
}

function goActive() {
    startTimer();
}

In case you may have concerns regarding CPU usage, here are some StackOverflow's answers to give you the courage.

https://stackoverflow.com/questions/6650134/is-setinterval-cpu-intensive'