如何在Nuxt插件中访问$nuxt对象并调用refresh方法

失效原因 #

• Nuxt插件的注入上下文默认不暴露$nuxt实例，直接解构$nuxt参数、从app.$nuxt/app.nuxt路径调用都会返回undefined
• $nuxt.refresh()是客户端专属方法，服务端运行时没有对应实例，调用会直接报错

正确实现方案 #

Nuxt2 环境 #

Nuxt2会在客户端侧将$nuxt实例挂载到window对象上，只需先判断当前为客户端运行环境，直接调用即可：

export default async function ({ $axios, app }) {
  // 仅在客户端侧注册拦截器，避免服务端运行时报错
  if (process.client) {
    $axios.onError(error => {
      if (error.response.status === 401 && error.response.data.detail?.includes("Invalid token")) {
        app.$auth.strategy.token.reset()
        // 从window对象获取$nuxt实例调用refresh
        window.$nuxt.refresh()
      }
    })
  }
}

Nuxt3 环境 #

Nuxt3取消了全局$nuxt挂载，替换为组合式API调用，刷新页面数据直接使用内置的refreshNuxtData方法即可：

export default defineNuxtPlugin(() => {
  const { $axios } = useNuxtApp()
  const { clearToken } = useAuth() // 对应认证模块的token清除逻辑
  
  $axios.onError(error => {
    if (error.response.status === 401 && error.response.data.detail?.includes("Invalid token")) {
      clearToken()
      // 刷新所有页面异步数据，等价于Nuxt2的$nuxt.refresh()效果
      refreshNuxtData()
    }
  })
})

备选方案 #

如果不需要保留页面当前临时状态（比如表单输入内容、临时交互状态），也可以直接使用location.reload()强制重载整个页面，该方法兼容性最高，不需要区分Nuxt版本和运行环境。

内容的提问来源于stack exchange，提问作者Thorvald