Nuxt3 SSR权限中间件致受保护页面意外渲染及样式闪烁问题求助

一、解决认证中间件先渲染页面再跳转的问题 #

问题核心 #

你的中间件仅限制在客户端执行，导致SSR服务端阶段直接渲染受保护页面，待客户端加载完成后才触发跳转，造成不良体验。本质是服务端无法读取客户端localStorage的token，无法在服务端提前判断认证状态并重定向。

修复方案 #

调整认证逻辑，让服务端通过Cookie获取token，客户端保持localStorage同步，同时让中间件在服务端和客户端都能执行认证判断：

1. 更新Auth Store
   区分服务端/客户端的token获取方式，同步Cookie与localStorage：

   export const useAuthStore = defineStore('auth', () => {
     // 服务端从Cookie取token，客户端从localStorage取
     const token = ref(
       process.server ? useCookie('token').value : useStorage('token', null)
     )
   
     // 客户端初始化时同步服务端Cookie到localStorage
     if (process.client && token.value) {
       useStorage('token', token.value)
     }
   
     // 修正认证判断：确保token真实存在
     const check = computed(() => !!token.value)
   
     // 登录时同时设置Cookie和localStorage
     const login = (newToken) => {
       token.value = newToken
       if (process.server) {
         const cookie = useCookie('token')
         cookie.value = newToken
         // 可选：设置Cookie有效期、路径
         cookie.expires = new Date(Date.now() + 7 * 24 * 60 * 60 * 1000)
         cookie.path = '/'
       } else {
         useStorage('token', newToken)
       }
     }
   
     // 登出时清除两者
     const logout = () => {
       token.value = null
       if (process.server) {
         useCookie('token').value = null
       } else {
         useStorage('token', null)
       }
     }
   
     return { token, check, login, logout }
   })
   

2. 修改认证中间件
   移除process.client限制，让服务端和客户端都执行检查，用Nuxt内置的navigateTo适配不同环境：

   export default defineNuxtRouteMiddleware(async (to, from) => {
     const authStore = useAuthStore()
   
     if (!authStore.check) {
       authStore.returnUrl = to.fullPath
       // navigateTo自动适配服务端重定向和客户端跳转
       return navigateTo('/admin/login')
     }
   })
   

修改后，服务端渲染时会直接判断认证状态，未认证则直接重定向到登录页，不会渲染受保护页面；客户端也会正常执行检查，彻底解决先渲染再跳转的问题。

二、解决SSR刷新样式闪烁问题 #

问题原因 #

样式闪烁通常是SSR阶段未正确注入PrimeVue或自定义样式，客户端水合时才加载样式导致的。

修复方案 #

1. 确保PrimeVue样式全局注入
   在nuxt.config.ts中配置PrimeVue自动导入样式，确保核心样式在SSR阶段被嵌入：

   export default defineNuxtConfig({
     modules: ['@nuxtjs/tailwindcss', '@sfxcode/nuxt-primevue'],
     primevue: {
       autoImport: true, // 自动导入组件
       css: true, // 自动导入PrimeVue基础样式
       options: {
         ripple: true
       }
     },
     // 显式导入主题与核心样式，确保SSR时加载
     css: [
       'primevue/resources/themes/lara-light-blue/theme.css',
       'primevue/resources/primevue.css',
       'primeicons/primeicons.css',
       '@/assets/css/main.css' // 你的自定义样式
     ],
     app: {
       head: {
         // 预加载字体资源，减少闪烁
         link: [
           { rel: 'preconnect', href: 'https://fonts.googleapis.com' },
           { rel: 'preconnect', href: 'https://fonts.gstatic.com', crossorigin: '' }
         ]
       }
     },
     // 优化资源压缩
     nitro: {
       compressPublicAssets: true
     }
   })
   

2. 移除客户端仅加载的样式
   检查代码中是否有if (process.client)包裹的样式导入，这类代码会导致SSR阶段无样式，客户端加载时闪烁。将全局样式改为直接在nuxt.config.ts的css数组中导入。

3. Tailwind CSS适配
   确保Tailwind配置文件(tailwind.config.js)正确设置，Nuxt会自动在SSR阶段生成对应样式，无需额外处理。

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