Bueno, estoy comenzando con nuxt y tengo las siguientes rutas:

/home

/dashboard

/login

Quiero proteger el panel /, pero solo para los usuarios que hayan iniciado sesión con un token en localStorage.

La forma más sencilla en que pensé en hacer esto fue creando un /middleware/auth.js

export default function () {
  if (!window.localStorage.getItem('token')) {
    window.location = '/login'
  }
}

Y registrarlo en el componente /dashboard/index.vue.

<script>
export default {
  middleware: 'auth',
}
</script>

Pero no puedo acceder a localStorage dentro de un middleware, porque LocalStorage es del lado del cliente.

Ya he intentado agregar esta misma verificación en el diseño del tablero created(), pero no puedo devolver la ventana no configurada mounted() es demasiado tarde, solo puede verificar después de que la página se haya ensamblado completamente.

Entonces, ¿cómo puedo lograr esto? Nota: No tengo la intención de utilizar ningún Vuex para este proyecto.

2
Yung Silva 9 sep. 2018 a las 02:53

3 respuestas

La mejor respuesta

Usé cookie-universal-nuxt

En la tienda vuex para la acción de inicio de sesión, configuré una confirmación con el token

window.$nuxt.$cookies.set('token', payload, {
            path: '/',
})

Middleware / auth.js

export default (context) => {
    if (!context.app.context.app.$cookies.get('token')) {
        return context.redirect('/login')
    }
}
1
rrrm93 15 nov. 2018 a las 15:12

Podría usar algo como esto para el almacenamiento en nuxt, que funcionará tanto en el lado del cliente como del servidor

https://github.com/alibaba-aero/nuxt-universal-storage

-1
Aldarund 9 sep. 2018 a las 15:13

Para cualquiera que no esté satisfecho almacenando la información en cookies, aquí está mi solución:

He tenido muchos problemas con esto y no estaba satisfecho con la configuración de una cookie. Si está ejecutando Nuxt y no le ha dicho que se ejecute en modo spa, se ejecutará en modo universal. Nuxt define el modo universal como:

Aplicación isomórfica (renderizado del lado del servidor + navegación del lado del cliente)

El resultado es que localStorage no está definido en el lado del servidor y, por lo tanto, arroja un error.

El regalo para mí fue que el registro de la consola desde los archivos de middleware y Vuex se envió a la terminal y no a la consola en las herramientas de desarrollador en el navegador.

La solución para mí fue cambiar el modo a spa en el nuxt.config.js que se encuentra en la raíz.

Tenga en cuenta que aún puede acceder a localStorage, que ejecuta el modo universal, en archivos de página y componentes porque no son del lado del servidor.

Los archivos de middleware se ejecutan, en modo universal, en el lado del servidor, por lo que cambiar al modo spa hace que se ejecuten en el lado del cliente y, por lo tanto, les permite acceder a localStorage.

Para obtener más información sobre los modos Nuxt, lea estos:

0
MR_BlueScr 15 ago. 2019 a las 16:15