Miguel
Miguel
General
Comparte:

Laravel Sanctum y vue, problema al aplicar middleware a rutas

Hola Jorge, tengo un problema que me surge luego de terminado de configurar laravel sanctum con vue en mi aplicación, el login funciona bien, logout, la sesión permanece y todo, pero al agregarle middleware requireAuth a cada rutas excepto login, y al hacer f5 me redirecciona a la ruta de /login, esto sin perder la sesión que tengo, basicamente dentro del sistema se cambia de url sin perder el usuario logeado y sin salir del sistema como tal... Este es el codigo que tengo, y tambien tengo mi duda en stackoverflow donde tengo mas detalle de mi codigo... https://es.stackoverflow.com/questions/413790/permanecer-en-la-ruta-al-hacer-f5-en-vuex-laravel-sanctum
import Vue from 'vue'
 | import VueRouter from 'vue-router'
 | import Home from '../views/Home.vue'
 | import store from "../store/store";
 | 

 | Vue.use(VueRouter)
 | 

 | const routes = [
 |   {
 |     path: '/home',
 |     name: 'Home',
 |     component: Home,
 |     meta: { 
 |       requireAuth: true 
 |     }
 |   },
 |   {
 |     path: '/users/userlist',
 |     name: 'UserList',
 |     component: () => import('../views/users/UserList.vue'),
 |     meta: { 
 |       requireAuth: true 
 |     }
 |   },
 |   {
 |     path: '/login',
 |     name: 'Login',
 |     component: () => import('../views/Login.vue')
 |   },
 |   {
 |     path: "*",
 |     redirect: "/login",
 |   }
 | ]
 | 

 | const router = new VueRouter({
 |   mode: 'history',
 |   base: process.env.BASE_URL,
 |   routes
 | })
 | 

 | //Esta sección como debe ir?
 | 

 | router.beforeEach((to, from, next) => {
 |   let loginRequired = to.matched.some((ruta) => ruta.meta.requireAuth);
 |   
 |     if (loginRequired && !store.state.user) {
 |       
 |       next('/login');
 |     } else {
 |       next();
 |     }
 | })
 | 

 | export default router
Nicolas Aldana
Nicolas Aldana (1082 xp)
si estas obteniendo el usuario mediante store lo que puedes hacer es hacer un disptach a el action del store en el main para que antes de renderizar vue haga una solicitud del estado, asi
store.dispatch('getUser').then(() => {
    new Vue({
        router,
        store,
        mixins: [mixin],
        render: h => h(App)
    }).$mount("#app");
});