vue.js - 最佳实践 ...NuxtJS 中的 session 超时

Question

我刚刚接手了一个新项目(由另一家公司开发)，我想添加一个 30 分钟的非事件 session 超时。我找到了一个通过 VueJS 使用的简单脚本，但我不确定在 NuxtJS 中实现它的最佳方法是什么。谁能指出我正确的方向？

看起来他们只是在使用 Nuxt 中内置的 Auth 功能。我只是不确定是否应该将我的逻辑添加为组件、中间件、插件？

我在此处包含了包和 nuxt.config 示例 - https://gist.github.com/TheJason/3701295fc28175436a8cad5bb05b4912

我正在使用 https://www.npmjs.com/package/idle-vue这看起来非常简单，但不考虑 NuxtJS 框架。

Answer 1

我认为最好把它作为插件添加；方法如下:

首先在plugins目录下创建一个'idle-vue.js'文件；

//plugins/idle-vue.js
import Vue from 'vue';
import IdleVue from 'idle-vue';

const eventsHub = new Vue();

Vue.use(IdleVue, {
    eventEmitter: eventsHub,
    idleTime: 60000
    startAtIdle: false
  });

然后将其添加到您的 nuxt 配置的插件部分:

//nuxt.config.js
plugins: [
    { src: "@/plugins/idle-vue", mode: 'client' },
    ...
]

然后在你希望使用空闲计时器的组件中，你可以使用如下钩子(Hook):

async onIdle() {
    this.doSomethingWhenUserIsIdle();
}
async onActive() {
    this.doSomethingWhenUserIsNoLongerIdle();
}

相关链接如下:

nuxt with idle-view

using with Nuxt 2.4<