Nuxt3 SSR 서버/클라이언트 미들웨어로 인해 보호된 페이지가 예기치 않게 렌더링됩니다.
<p>간단한 인증으로 Nuxt SSR 애플리케이션을 개발 중입니다. </p>
<p>로그인에 필요한 모든 경로를 보호하는 <code>auth 미들웨어</code>가 있습니다. </p>
<pre class="brush:php;toolbar:false;">기본 내보내기 defNuxtRouteMiddleware(async (to, from) => {
if (process.client) {
const authStore = useAuthStore()
if (!authStore.check) {
authStore.returnUrl = to.fullPath
useRouter().push('/admin/login')
}
}
})</pre>
<p>이 미들웨어는 저장된 브라우저 쿠키를 확인하므로 클라이언트에서 실행되어야 합니다</p>
<pre class="brush:php;toolbar:false;">export const useAuthStore = 정의스토어('auth', () => {
const 토큰 = ref(useStorage('token', null))
const check = 계산됨(() => token.value !== 정의되지 않음)
....</pre>
<p>내가 아는 한, SSR 미들웨어는 대개 서버 측에서 먼저 실행된 다음 클라이언트 측에서 실행됩니다. </p>
<p>문제는 로그인이 필요한 페이지를 보호하기 위해 이 인증 미들웨어를 적용할 때입니다</p>
<pre class="brush:php;toolbar:false;"><스크립트 설정 lang="ts">
정의페이지메타({
미들웨어: ['admin-auth'],
// 또는 미들웨어: 'auth'
})
</스크립트>
<템플릿>
<div class="flex justify-center items-center h-screen p-3">admin 1</div>
</템플릿></pre>
<p>미들웨어는 먼저 서버 측에서 실행되어 페이지가 의도하지 않게 렌더링된 다음 논리를 사용하여 클라이언트를 트리거하고 다시 로그인 페이지로 리디렉션합니다. 이것은 매우 추악합니다. 실제로 볼 수 있습니다. </p>
<p>이 문제가 발생한 사람이 있나요? 어떤 해결책이라도 매우 감사하겠습니다. 내 요구 사항은 이 애플리케이션에 SSR을 사용하는 것입니다. </p>
<시간 />
<p>그리고 작은 문제도 있습니다. SSR을 실행하고 페이지를 새로 고칠 때 일부 스타일 깜박임이 있습니다. 이유는 모르겠습니다. 저는 이 템플릿 https://github.com/sfxcode/nuxt3-primevue-starter</p>을 사용하고 있습니다.
<시간 />
<p>며칠 동안 해결책을 찾고 있었습니다@_@</p>
