I'm developing a Nuxt SSR app with a simple authentication.
I have auth middleware to guard all login required routes.
export default defineNuxtRouteMiddleware(async (to, from) => {
if (process.client) {
const authStore = useAuthStore()
if (!authStore.check) {
authStore.returnUrl = to.fullPath
useRouter().push('/admin/login')
}
}
})
This middleware checks browser cookie in store, hence it needs to be run on the client side
export const useAuthStore = defineStore('auth', () => {
const token = ref(useStorage('token', null))
const check = computed(() => token.value !== undefined)
....
From my understanding, normally the SSR middleware runs on the server side first and then the client side.
The problem is, when I apply this auth miidleware to gaurd a login required page
<script setup lang="ts">
definePageMeta({
middleware: ['admin-auth'],
// or middleware: 'auth'
})
</script>
<template>
<div class="flex justify-center items-center h-screen p-3">admin 1</div>
</template>
The middleware will run on the sever side first causing the page to render unintentionally, and then trigger the client side with the logic, and it will redirect back to login page. This is very ulgy. You can see it in action.
Has anyone run into this problem before? Any solution would be really appreiated. My requirement is to use SSR for this app.
Plus, another small problem. when running SSR and you refresh the page, there's some style fickering. I'm not sure why. I'm using this template https://github.com/sfxcode/nuxt3-primevue-starter
I've been looking for a solution for several days already @_@