Nuxt3 SSR サーバー/クライアント ミドルウェアにより、保護されたページが予期せずレンダリングされる
<p>簡単な認証を備えた Nuxt SSR アプリケーションを開発しています。 </p>
<p>ログインに必要なすべてのルートを保護するための <code>認証ミドルウェア</code> を使用しています。 </p>
<pre class="brush:php;toolbar:false;">デフォルトのエクスポートdefineNuxtRouteMiddleware(async (to, from) => {
if (プロセス.クライアント) {
const authStore = useAuthStore()
if (!authStore.check) {
authStore.returnUrl = to.fullPath
useRouter().push('/admin/login')
}
}
})</pre>
<p>このミドルウェアは保存されているブラウザの Cookie をチェックするため、クライアント上で実行する必要があります</p>
<pre class="brush:php;toolbar:false;">export const useAuthStore =defineStore('auth', () => {
const token = ref(useStorage('token', null))
const check = computed(() => 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>
</template></pre>
<p>ミドルウェアは最初にサーバー側で実行され、ページが意図せずレンダリングされ、次にロジックでクライアントをトリガーし、ログイン ページにリダイレクトします。これはとても醜いことです。実際の動作を見ることができます。 </p>
<p>この問題に遭遇した人はいますか?どのような解決策でも大歓迎です。私の要件は、このアプリケーションに SSR を使用することです。 </p>
<p>また、小さな問題があります。 SSR を実行してページを更新すると、スタイルがちらつきます。何故かはわからない。私はこのテンプレートを使用していますhttps://github.com/sfxcode/nuxt3-primevue-starter</p>
<p>数日間解決策を探していました@_@</p>
