最佳实践 ... NuxtJS 中的会话超时答案

【问题标题】：Best Practice ...Session Timeout in NuxtJS最佳实践 ... NuxtJS 中的会话超时
【发布时间】：2021-12-31 18:44:30
【问题描述】：

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

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

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

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

【问题讨论】：

Nuxt 中没有内置的身份验证。你能告诉我们一些代码或至少package,json/nuxt.config.js吗？如果您在全局范围内需要它，您可以将其定义为client plugin only。最后，Nuxt 基本上是 Vue 的强项，所以它是完全兼容的。
好的...是的，我仍然在尝试解决这个问题...这就是我所指的auth.nuxtjs.org/api/auth我刚刚更新了问题以包含包和nuxt.config gist.github.com/TheJason/3701295fc28175436a8cad5bb05b4912
好的，到目前为止你尝试了什么？
我刚刚创建了一个包含 idle-vue 逻辑的组件。但无法真正弄清楚如何加载它。我过于谨慎，因为我不想搞砸目前的情况。我去看看你提到的客户端插件选项

标签： vue.js nuxt.js

【解决方案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' },
    ...
]

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

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

以下是相关链接：

nuxt with idle-view

using with Nuxt 2.4<

【讨论】：

如果不需要，全局导入它是没有意义的。本地导入完全没问题。