Laravel + Vuejs 遇到异步问题

Posted 2023-03-14

【中文标题】Laravel + Vuejs 遇到异步问题

【英文标题】：Laravel + Vuejs have trouble with async problem

【发布时间】：2020-11-05 01:55:02

【问题描述】：

我的 Vuejs/Laravel 应用程序出现异步问题。

如果用户已连接，我在 vuex 中有：我的状态用户和状态令牌。我在 localStorage 中设置了这个令牌，如果我的用户 F5（刷新页面），我可以重新登录他。

这是我的商店（命名空间：auth）：

export default 
    namespaced: true,
    state: 
        token: null,
        user: null
    ,
    getters: 
        authenticated(state)
            return state.token && state.user;
        ,
        user(state)
            return state.user;
        
    ,
    mutations: 
        SET_TOKEN(state, token)
            state.token = token;
        ,
        SET_USER(state, data)
            state.user = data;
        ,
    ,
    actions: 
        async login( dispatch , credentials)
           let response = await axios.post(`/api/auth/connexion`, credentials);

           dispatch('attempt', response.data.token);
        
        , 
        async attempt( commit, state , token) 
            if(token)
                commit('SET_TOKEN', token);
            
            if (!state.token)
                return
            
            try
                let response = await axios.get(`/api/auth/me`);
                commit('SET_USER', response.data);
                console.log('Done')
            
            catch(err)
                commit('SET_TOKEN', null);
                commit('SET_USER', null);
            
        
    

我的 app.js，我这样做是为了重新登录我当前的用户：

store.dispatch('auth/attempt', localStorage.getItem('token'));

为了在路由器中完成路由：

    name: 'Login',
    path: '/',
    component: Login,
    beforeEnter: (to, from, next) => 
      console.log('Getter in router : ' + store.getters['auth/authenticated']);
      if (!store.getters['auth/authenticated'])
        next()
      else 
        return next(
          name: 'Home'
        )
      
    
  

问题出在哪里，如果我调用 Home.vue，我的 getter “已验证”工作正常（如果用户连接则为 true，否则为 false）。

但在我的路由器中，所有时间都采用存储中设置的默认值（null）。我知道为什么，因为如果我重新加载页面 0.5 秒，则商店状态为 null，然后学习 localStorage 并创建我的用户和令牌。

我想要（我认为）是路由器等待我的操作尝试，然后他可以进行检查。

我已经跟着老师https://www.youtube.com/watch?v=1YGWP-mj6nQ&list=PLfdtiltiRHWF1jqLcNO_2jWJXj9RuSDvY&index=6

我真的不知道我需要做什么才能让我的路由器正常工作 =(

如果有人能解释一下，非常感谢！

更新：

如果我这样做就是工作：

    name: 'Login',
    path: '/',
    component: Login,
     beforeEnter:async (to, from, next) => 
      await store.dispatch('auth/attempt', localStorage.getItem('token'));

      if (!store.getters['auth/authenticated'])
        next()
      else 
        return next(
          name: 'Home'
        )
      
    

但我想了解我真正需要做什么，因为那不是一个明确的方法真的很垃圾。

更新2：

如果有人有其他方法，也许我找到了最好的解决方案。

    name: 'Home',
    path: '/accueil',
    component: Home,
    beforeEnter: (to, from, next) => 
      store.dispatch('auth/attempt', localStorage.getItem('token')).then((response) => 
        if (!store.getters['auth/authenticated'])
          return next(
            name: 'Login'
          )
        else 
          next();
        
      );
    
  

【问题讨论】：

有点难以追查问题所在。我建议你下载 Vue devtools（浏览器插件 firefox/chrome），这样你就可以查看它运行时的状态。

确实很难跟踪，开发工具肯定会有所帮助，我注意到您的商店没有定义为函数/闭包，而是作为静态对象，如果您重新导入可能会发生冲突它在商店里。导致为空。此外，请确保您在路由器中导入了商店。并且您可以检查模块是否已加载。全部。 （也 vue devtools 使这更容易）

您的商店模块是商店主入口点中的固定模块，还是您动态加载它..这也可能导致这些问题..

是的，我使用了 devtools，我看到 vuex 状态在 0.5 秒内为空，并在之后设置。但是现在直接在我的路由器中设置 store.dispatch 方法可以正常工作。我只是不知道是否有更好的方法来做到这一点。谢谢你的回复！

【参考方案1】：

我更清楚地回答了等待商店多么容易！

在我的 app.js 之前，我有这个：

store.dispatch('auth/attempt', localStorage.getItem('token'));

设置为通常每次重新加载都这样做，但如果我输入一个 console.log，我看到路由器正在执行，并且在“尝试”操作被执行之后。

所以在app.js中删除这一行，你可以在后面加上一个.then()！

router.beforeEach((to, from, next) => 
  store.dispatch('auth/attempt', localStorage.getItem('token')).then(() =>
    if (store.getters['auth/authenticated'])
      next();
    else 
      //something other
    
  )
)

我有相同的线路代码，但我可以对我的路由器说等待操作“尝试”。

I'm not sur 显然是最好的方法。但是是工作，我认为这不是一个坏方法！