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

Question

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

那么它应该等到动作完成，因为我在动作中这样做了：

常量 {数据} = 等待 axios.get('/api/user');

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

Answer 1

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

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