时间戳

首页 > 解决方案 > 页面重新加载时如何运行客户端功能？

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

问题描述

我很难弄清楚如何进行简单的“自动登录”，将 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在服务器模式下访问 - 我最终可以使用 Cookie，所以我可以从服务器读取它，但这不是重点）

输出是：

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

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

标签： nuxt.js

解决方案

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

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

PS：不要忘记在你的 Nuxt 配置中注册它。

推荐阅读