NuxtJS授权用户首次访问触发appendChild DOM异常求助

• 已授权用户首次打开NuxtJS站点时，触发错误：

  DOMException: Failed to execute 'appendChild' on 'Node': This node type does not support this method.
  刷新页面后错误消失；未授权用户无此问题。

• 开发模式下首次打开站点，重定向功能失效，控制台出现：

  The client-side rendered virtual DOM tree is not matching server-rendered content. This is likely caused by incorrect HTML markup, for example nesting block-level elements inside <p>, or missing <tbody>. Bailing hydration and performing full client-side render.

• 即使清空页面所有元素、组件，禁用所有模块，上述问题仍存在。

1. 同步服务端与客户端的auth状态配置 #

检查nuxt.config.js中的auth配置，确保重定向、存储策略在服务端和客户端一致：

// nuxt.config.js
export default {
  auth: {
    redirect: {
      home: '/',
      login: '/login',
      logout: '/login',
      callback: false
    },
    strategies: {
      local: {
        cookie: {
          name: 'auth._token.local',
          httpOnly: true,
          secure: process.env.NODE_ENV === 'production',
          path: '/',
          maxAge: 60 * 60 * 24 * 7
        },
        token: {
          property: 'token',
          global: true,
          required: true,
          type: 'Bearer'
        },
        user: {
          property: 'user',
          autoFetch: true
        }
      }
    }
  }
}

2. 用<client-only>隔离依赖auth状态的内容 #

服务端渲染时，若根据用户auth状态渲染不同内容，会导致客户端hydration不匹配。将授权用户专属内容包裹在<client-only>标签中，仅在客户端渲染：

<!-- 页面组件中 -->
<template>
  <div>
    <client-only>
      <div v-if="$auth.loggedIn">
        <!-- 仅授权用户可见的内容 -->
        <p>欢迎回来，{{ $auth.user.name }}</p>
      </div>
      <div v-else>
        <router-link to="/login">请登录</router-link>
      </div>
    </client-only>
  </div>
</template>

3. 调整auth初始化时机 #

在自定义auth插件中，确保客户端的auth逻辑仅在客户端环境执行，并等待auth初始化完成：

// plugins/auth.js
export default function ({ $auth }) {
  if (process.client) {
    $auth.onReady(() => {
      // 客户端auth初始化完成后的逻辑，比如处理重定向
      if ($auth.loggedIn && window.location.pathname === '/login') {
        window.location.href = '/'
      }
    })
  }
}

记得在nuxt.config.js中注册该插件：

// nuxt.config.js
export default {
  plugins: ['~/plugins/auth.js']
}

4. 避免服务端渲染时的DOM操作冲突 #

确保所有涉及DOM操作的auth相关逻辑仅在客户端执行，比如在页面的mounted钩子中处理，而非asyncData或fetch（这两个钩子会在服务端执行）：

<script>
export default {
  mounted() {
    // 仅在客户端执行的auth逻辑
    if (this.$auth.loggedIn) {
      // 处理授权后的逻辑
    }
  }
}
</script>

5. 临时方案：禁用页面的服务端渲染（不推荐长期使用） #

若以上方法无效，可针对特定页面禁用服务端渲染，强制仅客户端渲染：

<script>
export default {
  ssr: false
}
</script>

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