[solved] Auto-logout, or multi-threading/web worker

[rconstantine]

Hello,

I have a need to auto-logout users after a set amount of inactivity. The timer should start when the user first logs in, and should be reset so long as they are obviously engaged. I’ll define what that means later, but for now, such an operation clearly shouldn’t block the main thread.

I’ve done a cursory look around and there were two mentions in these forums for x10, which uses web workers, but I didn’t figure out whether it communicates back to the main thread or not on an ongoing basis. I also found vue-web-worker (or something like that) which makes creating web workers easy, but the request in the issue queue to allow for workers to communicate back to the main thread have gone unanswered. It seems like that both modules are one-way and that threads are expected to just do something then die. Unless, I don’t understand them.

So at this point, the only solution I can think of is to set a timestamp X amount in the future at login, then update it when the user clicks around. If they walk away and come back after expiration, then take them to the login screen. The issue with that is I don’t want to leave their last screen up for that long as it could contain sensitive information.

Ideas?

[jeffatpf]

Check out idle-vue. It works perfectly for same purposes within our application.

https://www.npmjs.com/package/idle-vue

[rconstantine]

Thanks for that. I’m giving it a try right now. I’m a bit confused on using Vuex with it though. As you know, Quasar does its own thing with Vuex, and stores, and I’m unclear how to slot this in. If you’ve done this already, I’d appreciate a hint. Otherwise, I’ll just give a few things a try. That said, it seems like it’s optional, so why would I need it for this?

[rconstantine]

For anyone interested, I managed to get this to work.

First, from my VUE file, which is a Quasar layout file:

<div
          id="clockdiv"
          v-show="isAuthenticated"
        >
          <q-tooltip>
            Due to HIPPA concerns, if you're inactive on this website, you'll be logged out when time expires.
          </q-tooltip>
          <div
            id="timerTitle"
            class="smalltext"
          >
            Auto
            <br>
            logout
          </div>
          <div>
            <span
              id="minutes"
              class="minutes"
            />
            <div class="smalltext">Min</div>
          </div>
          <div>
            <span
              id="seconds"
              class="seconds"
            />
            <div class="smalltext">Sec</div>
          </div>
        </div>

mounted () {
    this.listener = (event) => {
      // console.log('document event triggered')
      this.initializeClock('clockdiv', new Date(Date.parse(new Date()) + 20 * 60 * 1000))
    }
    document.addEventListener('mousedown', this.listener)
    document.addEventListener('keydown', this.listener)
    document.addEventListener('touchstart', this.listener)
  }

And my plugin file (idle-vue.js):

import Vue from 'vue'
import IdleVue from 'idle-vue'
import store from '../store'

const eventsHub = new Vue()

export default ({ Vue }) => {
  const options = {
    eventEmitter: eventsHub,
    idleTime: 1200000, // 20 minutes
    store: store,
    startAtIdle: false,
    events: ['keydown', 'mousedown', 'touchstart']
  }
  Vue.use(IdleVue, options)
}

[smajid14]

hello
how use to redirect to login