Nuxt3 SSR 서버/클라이언트 미들웨어로 인해 보호된 페이지가 예기치 않게 렌더링됩니다.

Question

간단한 인증으로 Nuxt SSR 애플리케이션을 개발 중입니다.

로그인에 필요한 모든 경로를 보호하는 auth 미들웨어가 있습니다.

기본 내보내기 defNuxtRouteMiddleware(async (to, from) => {
  if (process.client) {
    const authStore = useAuthStore()

    if (!authStore.check) {
      authStore.returnUrl = to.fullPath

      useRouter().push('/admin/login')
    }
  }
})

이 미들웨어는 저장된 브라우저 쿠키를 확인하므로 클라이언트에서 실행되어야 합니다

export const useAuthStore = 정의스토어('auth', () => {
  const 토큰 = ref(useStorage('token', null))
  const check = 계산됨(() => token.value !== 정의되지 않음)
  ....

내가 아는 한, SSR 미들웨어는 대개 서버 측에서 먼저 실행된 다음 클라이언트 측에서 실행됩니다.

문제는 로그인이 필요한 페이지를 보호하기 위해 이 인증 미들웨어를 적용할 때입니다

<스크립트 설정 lang="ts">
정의페이지메타({
  미들웨어: ['admin-auth'],
  // 또는 미들웨어: 'auth'
})
</스크립트>

<템플릿>
  <div class="flex justify-center items-center h-screen p-3">admin 1</div>
</템플릿>

미들웨어는 먼저 서버 측에서 실행되어 페이지가 의도하지 않게 렌더링된 다음 논리를 사용하여 클라이언트를 트리거하고 다시 로그인 페이지로 리디렉션합니다. 이것은 매우 추악합니다. 실제로 볼 수 있습니다.

이 문제가 발생한 사람이 있나요? 어떤 해결책이라도 매우 감사하겠습니다. 내 요구 사항은 이 애플리케이션에 SSR을 사용하는 것입니다.

<시간 />

그리고 작은 문제도 있습니다. SSR을 실행하고 페이지를 새로 고칠 때 일부 스타일 깜박임이 있습니다. 이유는 모르겠습니다. 저는 이 템플릿 https://github.com/sfxcode/nuxt3-primevue-starter

을 사용하고 있습니다. <시간 />

며칠 동안 해결책을 찾고 있었습니다@_@

Answer 1

일반적으로 검색 엔진에서는 공개 페이지만 색인화하면 되므로 보호된 페이지에는 "SSR"을 사용할 필요가 없습니다. SSR 모드에서는 쿠키에 저장된 데이터에 액세스할 수 있습니다. 이를 얻으려면 SRR 또는 CSR에 가능한 모든 사례가 지정되지 않도록 쿠키 처리를 위한 특수 라이브러리를 사용하는 것이 가장 편리합니다. Nuxt 2의 경우 cookie-universal-nuxt 라이브러리를 사용합니다. 서버와 클라이언트 DOM 트리가 다르지 않은지 확인하십시오. 그렇지 않으면 오류가 발생할 수 있습니다.