Проверьте, вошел ли пользователь в святилище Laravel с помощью Vuejs SPA

Я пытаюсь решить эту проблему, но не могу, у меня есть веб-сайт, созданный на Laravel и Vuejs: это мой app.js

import 'bootstrap';
import './axios';
import Vue from 'vue';
import VueRouter from 'vue-router';
import store from './store';
import router from './router';

store.dispatch('checkAuth');

const app = new Vue({
    el: '#app',
    store ,
    router
});

это мой router.js:

import VueRouter from 'vue-router';
import Login from './components/Login';
import Register from './components/Register';
import Main from './components/Main';   

   const checkLogin = (to, from, next) =>{
  if (to.matched.some(record => record.meta.requiresAuth)) {    
    if (!store.getters.isAuthenticated) {
      next({name: 'login' })
    } else {
      next()
    }

  } else if (to.matched.some(record => record.meta.requiresVisitor)) {
    if (store.getters.isAuthenticated) {
      next({name: 'home' })
    } else {
      next()
    }

  } else {
    next()
  }

}   

const router = new VueRouter({
  mode: 'history',
  routes: [
    { path: '/', 
      beforeEnter: checkLogin,          
      component: Main,
      meta: { requiresAuth: true },       
      children : [
        {
          path: "",
          name: "home",
          component: PostsList
        },
        ....      

      ] 
    },    
    { 
        path: '/login', 
        beforeEnter: checkLogin,
        component: Login, 
        name:'login',
        meta: { requiresVisitor: true } 
    },
    { 
        path: '/register',
        beforeEnter: checkLogin, 
        component: Register, 
        name: 'register',
        meta: { requiresVisitor: true }  
    }    

  ]
});

а это мой магазин:

import Vue from 'vue';
const state = {  
  user: null,
  isAuthenticated: false
};

const getters = {  
  isAuthenticated(state){
      return state.isAuthenticated;
  },
  currentUser(state){
      return state.user;
  }
};

  async login({commit, dispatch}, credentials) {  
    await axios.get('/sanctum/csrf-cookie');    
    const {data} = await axios.post("/login", credentials);
    commit('setAuth', data);           
  },

  async checkAuth({commit}) {  
      const {data} = await axios.get('/api/user');    
      commit('setAuth', data);               
  }
}

const mutations = {  
  setAuth(state, payload) {    
    state.user = payload.user;
    state.isAuthenticated = Boolean(payload.user);            
  }    
};

Затем возникает проблема, когда я обновляю страницу, она вызывает действие:

store.dispatch ('checkAuth');

тогда он должен подождать, пока действие не будет выполнено, потому что я сделал это в действии:

const {data} = await axios.get ('/ api / user');

Но нет, он не ждет, потому что vue-router выполняется, а состояние пользователя еще не установлено, store.getters.isAuthenticated - false, затем он перенаправляется на / login, а затем, когда я проверяю vue в браузере и убедитесь, что состояние было установлено правильно, даже если запрос к api / user возвращает пользователя правильно, поскольку до этого я вошел в систему, мне нужно, чтобы vue-router ждал, пока состояние vuex не будет установлено. что я могу делать? Спасибо.


javascript vue.js laravel vuejs2 laravel-sanctum
person Felipe    schedule 21.01.2021    source источник

Ответы (1)


arrow_upward
1
arrow_downward

Мне удалось решить эту проблему, но я не знаю, лучший ли это способ сделать это:

в моем app.js вместо этого:

store.dispatch('checkAuth');
    
    const app = new Vue({
        el: '#app',
        store ,
        router
    });

Я сделал это:

const VueInstance = ()=>{
  new Vue({
            el: '#app',
            store ,
            router
        });
}

store.dispatch('checkAuth').then(()=>{
    VueInstance();
}).catch(()=>{
    VueInstance();
});

Теперь он работает, потому что действие vuex checkAuth возвращает обещание, поэтому мне нужно было дождаться его завершения, но в случае, если действие возвращает ошибку, потому что при первой загрузке пользователь не регистрируется in, я должен добавить уловку, потому что Vue должен создаваться независимо от того, вошел ли пользователь в систему или нет. Если у кого-то есть лучшее решение, дайте мне знать. Спасибо.

person Felipe    schedule 31.01.2021