页面重新加载时如何运行客户端功能？

Question

我很难弄清楚如何做一个简单的“自动登录”，在此我将JWT令牌重新连接到axios ... 我不知道的是写在哪里，这样当有人刷新页面时，它可以被称为第一件事。

在“普通” VueJS中，可以钩到应用程序created事件，例如

new Vue({
  router,
  store,
  created() { /* application created hook */ },
  render: h => h(app)
}).$mount('#app')

但是在Nuxt中，我们如何完成相同的工作？

我也尝试过使用客户端中间件和客户端插件来运行，但是它们在刷新时不运行客户端模式，而仅在服务器模式下运行。

刷新页面后在客户端中运行代码的正确方法是什么？

---

添加了设置，以更好地了解我做了什么

我有2个示例中间件：

// FILE ./middleware/authenticated.js
export default function (ctx) {
    console.log('[MIDDLEWARE] Authenticated, is client:', process.client)
}

和

// FILE ./middleware/refreshToken.js
export default function (ctx) {
    console.log('[MIDDLEWARE] Refresh token, is client:', process.client)
}

我的布局如下：

export default {
    components: { ... },
    middleware: ['refreshToken', 'authenticated'],
    ...
}

我还添加了一个插件

// FILE ./plugins/auth.js
export default function (ctx) {
    console.log('[PLUGIN] Auth, is client:', process.client)
}

并将其设置为plugins: [{ src: '~/plugins/auth' }], ...

什么都没有在客户端上运行...全部都仅在服务器模式下运行（并且我无法在服务器模式下访问localStorage-我可以最终使用Cookies，以便可以从服务器读取它，但不是重点）

输出为：

[PLUGIN] Auth, is client:  false
[MIDDLEWARE] Refresh token, is client: false
[MIDDLEWARE] Authenticated, is client: false

如何在刷新页面后以客户端模式运行任何代码？

Answer 1

使用SSR时，中间件在初始请求的服务器端运行（例如，重新加载页面时）。

一个客户端插件，例如~plugins/refresh.client.js将满足您的需求，并且仅在页面加载后在客户端运行一次。

PS：别忘了在Nuxt配置中注册它。