登录方法在推送路由之前不等待调度动作完成

Posted 2023-02-22

【中文标题】登录方法在推送路由之前不等待调度动作完成

【英文标题】：Login method do not wait dispatch action finish before push route

【发布时间】：2020-01-04 10:08:07

【问题描述】：

在我的组件UserLogin中，有一个调用这个方法的提交按钮：

    methods: 
        login() 
          this.$store
            .dispatch("login", 
              email: this.email,
              password: this.password
            )
            //then redirect to default app
            .then(() => 
              console.log("2: router push to main")
              this.$router.push( name: "main" )
            )
            //error handeling
            .catch(err => 
              this.error = err.response.data.error
            )
        
      

分派的登录操作在我的商店模块 user.js 中

     actions: 
            login(
                commit
            , credentials) 
                ChatService.userLogin(credentials)
                    .then(response => 
                        commit('SET_USER_DATA', response)
                        console.log('1 : login dispatch')
                    )
                    .catch(error => 
                        console.log('Error login:', error)
                    )
            
        ,

Chatservice 是一个 axios api：

    import axios from 'axios'
    import store from "../../store/store"

    let apiClient = axios.create(
        baseURL: `http://127.0.0.1:8080/`,
        withCredentials: false, 
        headers: 
            Accept: 'application/json',
            'Content-Type': 'application/json'
        
    ) 

//The interceptor write the server token in Authorization header

    apiClient.interceptors.request.use(function (config) 
        const token = store.getters.token;
        if (token) 
            config.headers.Authorization = `Bearer $token`;
            console.log(token)
        
        return config;
    , function (err) 
        return Promise.reject(err);
    );

    export default 
        // USER AUTHENTICATION
        userLogin(credentials) 
            return apiClient.post('/login', credentials)
        

我的问题是当我按下提交按钮时，上面的 2 个控制台日志按此顺序调用：

2：路由器推送到主 1：登录调度

意思是我的方法中的 .then 在动作完成之前被调用。这是一个大问题，因为它会在我设置 userData 信息之前尝试推送路由......

如何改变这种行为？ 非常感谢

【问题讨论】：

您的登录操作没有返回任何内容，因此无需等待？

不是 userLogin(credentials) return apiClient.post('/login', credentials) ，在我的 axios API 中返回一些东西吗？那我应该返回什么？

好吧，其实我没看对眼。有了您的评论，我重新阅读了文档vuex.vuejs.org/guide/actions.html#composing-actions 并找到了他们返回的位置。我不得不写前面的ChatService.userLogin(credentials) 谢谢你的提示！！！

【参考方案1】：

你可以试试这个。如下所示推动路线

actions: 
            login(
                commit
            , credentials) 
                ChatService.userLogin(credentials)
                    .then(response => 
                        commit('SET_USER_DATA', response)
                        console.log('1 : login dispatch')
                        this.$router.push( name: "main" )
                    )
                    .catch(error => 
                        console.log('Error login:', error)
                    )
            
        ,

你的登录方法只会派发动作，动作会返回承诺..

【参考方案2】：

@Samurai8 注意到我必须写一个回报， 所以

return ChatService.userLogin(credentials)

解决了我的问题。 在 vuex 操作的文档中找到它https://vuex.vuejs.org/guide/actions.html#composing-actions