Nuxt3：如何利用生命周期钩子实现前后端权限条件渲染？

你的代码没生效是因为app:mounted是Nuxt应用全局钩子，不是组件级钩子，而且它只在客户端执行，既覆盖不了服务端渲染场景，也没法响应认证状态的动态变化。下面给你一套能在服务端、客户端都生效，且能响应状态变化的实现方案：

核心思路 #

要实现跨端的条件渲染，需要满足两个关键点：

• 服务端渲染时能拿到认证状态，提前渲染对应内容
• 客户端认证状态变化时，实时更新渲染结果

1. 用可跨端访问的状态存储认证信息 #

首先得把认证状态存在服务端和客户端都能读取的地方，比如useCookie（Cookie在服务端请求和客户端都能访问）：

// 可在composables目录封装复用的认证状态逻辑
export const useAuthStatus = () => {
  const isAuthenticated = useCookie<boolean>('is-authenticated', {
    default: () => false,
    httpOnly: false, // 允许客户端修改
    secure: process.env.NODE_ENV === 'production'
  })

  // 封装登录/登出方法，统一修改状态
  const login = () => {
    isAuthenticated.value = true
  }
  const logout = () => {
    isAuthenticated.value = false
  }

  return { isAuthenticated, login, logout }
}

2. 组件内实现跨端渲染逻辑 #

在组件里，你需要：

• 服务端渲染时提前获取认证状态
• 客户端监听状态变化，实时更新视图

示例代码：

<script lang="ts" setup>
const { isAuthenticated, login, logout } = useAuthStatus()

// 服务端预取认证状态（确保SSR时渲染正确内容）
useAsyncData('auth-status', async () => {
  // 这里可调用后端接口验证token，返回真实认证状态
  const verifyRes = await $fetch('/api/auth/verify')
  isAuthenticated.value = verifyRes.isValid
})

// 客户端监听认证状态变化，执行对应逻辑
watch(isAuthenticated, (newStatus) => {
  console.log('认证状态更新:', newStatus)
  // 可在此添加状态变化后的逻辑，比如页面跳转、数据刷新等
})
</script>

<template>
  <div v-if="isAuthenticated">
    <h2>欢迎登录！</h2>
    <button @click="logout">退出登录</button>
  </div>
  <div v-else>
    <h2>请先登录</h2>
    <button @click="login">登录</button>
  </div>
</template>

3. 组件级生命周期钩子的正确用法 #

如果需要在组件生命周期内执行逻辑，要使用Vue的组件钩子（Nuxt3兼容Vue3钩子），而非Nuxt全局应用钩子：

<script lang="ts" setup>
import { onMounted, onServerPrefetch } from 'vue'
const { isAuthenticated } = useAuthStatus()

// 服务端渲染前执行（组件SSR阶段触发）
onServerPrefetch(async () => {
  // 服务端专属逻辑：从请求头获取token验证
  const authToken = useRequestHeaders()['authorization']
  const res = await $fetch('/api/auth/verify', {
    headers: { authorization: authToken }
  })
  isAuthenticated.value = res.isValid
})

// 客户端挂载后执行
onMounted(() => {
  console.log('组件已在客户端挂载完成')
  // 可在此执行客户端专属逻辑，比如初始化第三方SDK
})
</script>

注意事项 #

• 如果使用第三方认证模块（如Nuxt Auth），直接用模块提供的useAuth/useUser即可，它们已封装好跨端状态同步逻辑
• 服务端渲染时，不要依赖window/document等客户端专属API，避免报错
• 认证状态的修改要确保跨端同步，优先用Cookie或配置过的Nuxt State

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