Esta es más una pregunta de interfaz general, pero por contexto, estoy usando Vue 3 y vue-router.

Estoy construyendo una funcionalidad para la autenticación con Vue 3. Debido a que no estoy usando Vuex, no pude encontrar una manera de acceder al estado desde el archivo donde se crea una instancia del enrutador. Así que pensé que tal vez colocaría una bandera llamada isAuthenticated en LocalStorage.

Cuando el usuario inicia sesión, isAuthenticated se establece en verdadero y luego el enrutador lee esto para validar los redireccionamientos posteriores. Esto es muy diferente a almacenar un token en LocalStorage: almaceno mis tokens en cookies httpOnly.

Para aquellos que conocen Vue3/Vue-router, se ve así:

 Router.beforeEach(async (to, from) => { // localStorage.isAuthenticated = false const isAuthenticated = localStorage.isAuthenticated; if ( // make sure the user is authenticated isAuthenticated !== 'true' && to.meta.requiresAuth && // Avoid an infinite redirect to.path !== '/login' ) { // redirect the user to the login page return '/login' } })

No sería gran cosa si alguien pirateara esto y cambiara la bandera a true ; mi backend rechazará cualquier llamada a la API que no tenga el token JWT correcto.

Pero, ¿es esta una mala práctica? Se siente un poco endeble, y estoy buscando escribir una aplicación robusta y segura.