Javascript 检查用户是否使用Vuejs SPA登录到Laravel sanctum

我正在尝试解决这个问题，但我不能，我有一个用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
});

这是我的路由器.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}=wait axios.get（'/api/user'）

---

但是没有，它不会等待，因为vue路由器已执行，并且由于用户状态尚未设置，store.getters.isAuthenticated为false，然后它重定向到/login，然后当我检查浏览器中的vue工具并查看状态设置是否正确时，即使对api/user的请求正确返回用户，因为在我登录用户之前，我需要vue路由器等待直到设置vuex状态。我能做什么？谢谢。

我能够解决这个问题，但我不知道这是否是最好的方法：

在我的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返回一个承诺，所以我需要等待它完成，但是，如果操作返回错误，因为在第一次加载中用户没有登录，我必须添加一个catch，因为无论用户是否登录，都应该创建Vue。如果有更好的解决方案，请告诉我。多谢各位