Estoy tratando de configurar guardias de navegación en mi aplicación Nuxt para redirigir a los usuarios a la pantalla de inicio de sesión si no están autenticados a través de Firebase Authentication. Cuando el usuario intenta navegar por el middleware de mi enrutador, los redirige con éxito, pero en la carga de la página no se los redirige.
Me di cuenta de que el middleware ni siquiera se dispara al cargar la página. Encontré una recomendación para probar un complemento para manejar la redirección en la carga de la página, pero no funciona. Llamar a router.push desde dentro del complemento no redirige al usuario.
Aquí hay algunas notas sobre mi configuración. Esto se está implementando en Firebase Hosting directamente como un SPA sin SSR. Está utilizando el módulo Nuxt-Firebase con el servicio de autenticación de Firebase.
// nuxt.config.js target: "server", // server here works when I deploy to firebase, but I also tried static ssr: false, middleware: ["auth"], plugins: [ "~/plugins/auth.js", ], modules: [ [ "@nuxtjs/firebase", { services: { auth: { initialize: { onAuthStateChangedMutation: "authData/ON_AUTH_STATE_CHANGED_MUTATION", onAuthStateChangedAction: "authData/ON_AUTH_STATE_CHANGED_ACTION", subscribeManually: false, }, }, }, }, ], ], };Aquí hay un complemento de muestra que pensé que podría resolver esto, pero llamar a handleLoggedOut parece no hacer nada en la carga de la página.
// --- plugin to redirect user --- /plugins/auth.js --- export default function (context, inject) { const auth = { handleLoggedOut: () => { console.log("logout handled"); context.redirect("/login"); }, }; inject("auth", auth); } // --- store actions --- /store/authData.js --- actions: { async ON_AUTH_STATE_CHANGED_ACTION( { commit, state, dispatch }, { authUser, claims } ) { if (authUser) { // logged in } else { // attempting to redirect here does not work this.$auth.handleLoggedOut() } }Soy nuevo en Nuxt y parece que no puedo encontrar un ejemplo que resuelva mi problema.
¡Cualquier ayuda será enormemente apreciada, gracias!
La solución para redirigir a los usuarios al inicio de sesión en la carga de la página fue poner esto en mi middleware de autenticación:
export default function ({ redirect, store, route }) { // https://nuxtjs.org/docs/internals-glossary/context#redirect if (!store || !store.getters || !store.getters["authData/isLoggedIn"]) { window.onNuxtReady(() => { window.$nuxt.$router.push("/login"); }); } }El código parece estar bien, pero puede usar this.$fire.auth.signOut() y puede eliminar el complemento de autenticación.
Ejemplo:
// --- almacenar acciones --- /store/authData.js ---
actions: { async signOut({ commit }, payload) { try { await this.$fire.auth.signOut(); // This is just a guard to avoid navigation guard error (NavigationDuplicated), // you can remove the if block if (!payload) { this.$router.push('/login') } commit(ON_AUTH_STATE_CHANGED_MUTATION, { authUser: null}) } catch(err) { console.log(err) } }, async ON_AUTH_STATE_CHANGED_ACTION( { commit, state, dispatch }, { authUser, claims } ) { if (authUser) { // logged in } else { // attempting to redirect here does not work return dispatch('signOut') } }}