로그인 메서드는 푸시 경로 전에 디스패치액션이 완료될 때까지 기다리지 않습니다.

로그인 메서드는 푸시 경로 전에 디스패치액션이 완료될 때까지 기다리지 않습니다.

컴포넌트 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
            })
        }
      }

디스패치된 로그인 액션은 내 스토어 모듈 사용자 내에 있습니다.

     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)
        }

문제는 submit 버튼을 누르면 위의 2개의 콘솔로그가 다음 순서로 호출된다는 것입니다.

2: 라우터를 메인1로 푸시: 로그인 디스패치

즉, 내 메서드에서 .는 작업이 완료되기 전에 호출됩니다.userData 정보를 설정하기 전에 루트를 푸시하려고 하기 때문에 큰 문제가 됩니다.

어떻게 하면 이 동작을 바꿀 수 있을까요?정말 감사해요.

@Samurie8이 내가 답신을 써야 한다는 것을 알아차렸기 때문에

return ChatService.userLogin(credentials)

내 문제를 해결했다.vuex 액션 문서(https://vuex.vuejs.org/guide/actions.html#composing-actions에서 확인)

이거 드셔보세요.아래와 같이 행동 루트를 추진하다

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)
                    })
            }
        },

로그인 방법은 액션만 디스패치하고 액션은 약속을 반환합니다.

언급URL : https://stackoverflow.com/questions/57738839/login-method-do-not-wait-dispatch-action-finish-before-push-route