<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>
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
通常、検索エンジンによってインデックスを作成する必要があるのは公開ページのみであるため、保護されたページに「SSR」を使用する必要はありません。 SSR モードでは、Cookie に保存されているデータにアクセスできます。これらを取得するには、考えられるすべてのケースが SRR または CSR で指定されているわけではないように、Cookie を処理する特別なライブラリを使用するのが最も便利です。 Nuxt 2 では、cookie-universal-nuxt ライブラリを使用します。 サーバーとクライアントの DOM ツリーが異なっていないことを確認してください。異なっていると、エラーが発生する可能性があります。