Tengo un problema: necesito obtener datos de almacenamiento local antes de que se cargue el diseño nuxt en pages/index.vue
/pages/index.vue
<script> export default { layout (context) { if (localStorage.getItem('AUTH_TOKEN')){ this.$store.dispatch('changeAuthStatus', { authStatus: true, accessToken: localStorage.getItem('AUTH_TOKEN'), profileData: JSON.parse(localStorage.getItem('PROFILE_DATA')) }).then(() => { this.$store.dispatch('changeLoadedStatus', { isLoaded: true }) }) } else { this.$router.push('/auth') } } </script> El error cuando se carga la página: localStorage is not defined
¿Tal vez pueda obtener datos de almacenamiento local usando contexto? ¿O tal vez me puede sugerir algún paquete para que pueda usarlo en la función de diseño?
Encontré la solución:
Acabo de instalar el módulo nuxt-universal-storage , que sugirió Amirhossein Shahbazi . Así que acabo de hacer esto:
/páginas/index.vue:
<script> export default { middleware: ['auth'], layout (context) { let currentRole = context.app.$storage.getUniversal('PROFILE_DATA') console.log(currentRole) let currentLayout = 'default' let defaultRoles = ['customer_support_manager', 'checker', 'storekeeper'] let tabletRoles = ['deputy_cutting_shop'] if (defaultRoles.includes(currentRole.role)) { currentLayout = 'default' } else if (tabletRoles.includes(currentRole.role)) { currentLayout = 'tablet' } return currentLayout } </script>/middleware/auth.js:
export default function ({ redirect, app, store }) { // some token checkers for existing, for 401 error and for their validity }Si no me equivoco, Nuxt es la solución SSR para Vue (igual que Next para React), ¿verdad?
Si es así, no tiene acceso a localStorage. ¡Server Side no se está ejecutando en su navegador!
Este tipo de código funciona bien.
<script> export default { layout({ store }) { if (process.client) { console.log('localStorage?', localStorage.getItem('myCat')) console.log('store?', store) } }, } </script> Porque localStorage no está disponible en el servidor.
Intente usar localStorage.setItem('myCat', 'Tom') , muévase a su página y vea cómo muestra localStorage y la tienda (no olvide usar el contexto ya que this no está disponible aquí).