检查用户是否使用 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');

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

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

但是不，它不会等待，因为 vue-router 已执行并且用户状态尚未设置，store.getters.isAuthenticated 为 false 然后它重定向到/login，然后当我在浏览器中检查 vue 工具时，看到状态设置正确，甚至对 api/user returns 用户的请求也正确，因为在此之前我登录了一个用户，我需要vue-router 一直等到 vuex 状态被设置。我能做什么？谢谢。

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

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

Check if user is logged in Laravel sanctum with Vuejs SPA

javascript

laravel

vue.js

vuejs2

laravel-sanctum