检查用户是否使用 Vuejs SPA 登录 Laravel sanctum [英] Check if user is logged in Laravel sanctum with Vuejs SPA

问题描述

我正在尝试解决这个问题，但我不能，我有一个用 Laravel 和 Vuejs 构建的网站:这是我的 app.js

I am trying to solve this but I can't, I have a website built with Laravel and Vuejs: This is my 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:

this is my 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);            
  }    
};

然后问题来了，当我刷新页面时，它会调用操作:

Then the problem arrives when I refresh the page, it calls the action:

store.dispatch('checkAuth');

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

then it should wait until the action is done because I did this in the action:

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

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

But no, it doesn't wait because vue-router is executed and as the user state is not set yet , store.getters.isAuthenticated is false then it redirects to /login, then when I check the vue tools in the browser and see that the state was set correctly even the request to api/user returns the user correctly, Because before that I logged in a user, I need that vue-router waits until the vuex state is set. what can I do? Thank you.

推荐答案

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

I was able to solve this problem, but I don't know if this is the best way to do it:

在我的 app.js 中而不是这样:

in my app.js Instead of this:

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.如果有人有更好的解决方案，请告诉我.谢谢.

Now it is working because the vuex action checkAuth returns a promise, so I needed to wait until it is completed, but, in case the action returns an error, because in the first load the user is not logged in, I must add a catch, because th Vue should be created whether the user is logged in or not. If someone have a better solution let me know. Thank you.

这篇关于检查用户是否使用 Vuejs SPA 登录 Laravel sanctum的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！