0
329
ViewsVue: verifique el almacenamiento local antes de la ruta inicial (para el token)
Tengo una aplicación Vue que hace un poco de almacenamiento local y verificación del servidor en la carga de la aplicación, para determinar dónde enrutar inicialmente al usuario.
Esto está en el componente de entrada principal de la aplicación, en el gancho created()
Mi problema es que el componente predeterminado / de la ruta se carga visiblemente primero, luego la llamada del servidor y todo sucede, lo que hace que el usuario enrute a su ubicación correcta
¿Cómo puedo retrasar la representación del componente inicial hasta que se complete el método del componente principal created() de mi aplicación y luego lleve al usuario a la ruta correcta?
2 answers
Answer question0
EDITAR: acabo de ver que usaste el método created ... como se menciona a continuación, usa beforeRouteEnter en su lugar con el next() parámetro que proporciona
En primer lugar, no recomendaría usar un retraso, sino una variable que realiza un seguimiento de si la llamada a la API se realiza o no. Puede lograr esto usando el método montado:
data() { return { loaded: false, } } async mounted() { await yourAPICALL() if (checkIfTokenIsOkay) { return this.loaded = true; } // do something here when token is false }Ahora en su html solo muéstrelo cuando lo cargue como verdadero:
<div v-if="loaded"> // html </div> Un mejor enfoque es usar el método beforeRouteEnter que le permite ni siquiera cargar la página en lugar de no mostrarla: https://router.vuejs.org/guide/advanced/navigation-guards.html
0
Tuve este problema antes y creo firmemente que debe tener los archivos iniciales para sus rutas y la configuración de su enrutador.
En la configuración, podría manejar el permiso y el enrutador antes de cada ruta y con next() . En el archivo del enrutador, puede configurar sus parámetros y verificarlos en el archivo index.js (configuración del enrutador)
también puede usar sus datos de almacenamiento local en Router.beforeeach
