Tengo un middleware que necesito verificar si el usuario se autenticó cada vez que visita la página. Por ahora parece así, solo para asegurarse de que pueda funcionar con localStorage :
export default function({ store, redirect, route }) { console.log('Here is auth middleware') console.log(localStorage.getItem('token')) } // nuxt.config.js plugins: [ '~/plugins/test.client.js' ], Generalmente, este middleware tiene que funcionar con localStorage . Aquí encontré la solución a mi problema, pero funciona solo una vez (de la documentación):
En el modo universal, los middlewares se llamarán del lado del servidor una vez (en la primera solicitud a la aplicación Nuxt o cuando se actualice la página) y del lado del cliente cuando navegue a otras rutas.
Por lo tanto, necesito crear dicho middleware, que funcionará solo en páginas específicas y podrá trabajar con localStorage con la aplicación Nuxt.js en modo universal . ¿Es posible implementar?
Este problema se puede resolver usando mixins . En mixins/auth.js tengo este código:
import { verifyToken } from "@/api"; export default { async mounted() { if (!localStorage.getItem('token')) { await this.$router.push({path: '/login'}) } else { const checkToken = await verifyToken({ token: localStorage.getItem('token') }) if (checkToken.error) { localStorage.removeItem('token') await this.$router.push({path: '/login'}) } } } } Y luego, en la página donde necesito verificar si hay un token válido en localStorage , solo hago esto:
<script> import auth from '~/mixins/auth' export default { name: "Component", mixins: [auth], </script>