Блог

Я хочу знать, какую часть кода я должен удалить из магазина и добавить в Login.vue

И как я могу выбросить ошибки проверки, возвращаемые из API в хранилище, чтобы я мог обработать их на странице Login.vue

Войти.vue

 <template>My login form is here</template>

<script>
import { AUTH_AUTHENTICATE } from "@/modules/auth/store/index";

methods: {
    loginFormSubmit() {
        /** AFTER LOGIN SUCCESS FROM STORE,
            WHAT CAN I HANDLE HERE SO THAT MY STORE IS CLEAN 
        */

        this.$store.dispatch(AUTH_AUTHENTICATE, this.loginForm);
        
    }
}
</script>
 

src/модули/аутентификация/хранилище/индекс

 export const AUTH_AUTHENTICATE = "/api/auth/authenticate";

actions: {
    [AUTH_AUTHENTICATE]: ({ commit }, loginForm) => {
        toolsApi.get("/sanctum/csrf-cookie").then(() => {
            toolsApi
                .post("/api/auth/authenticate", loginForm)
                .then(response => {
                    if (response.data.status == "success") {
                        const token = `Bearer ${response.data.data.token}`;

                        Cookie.set("AUTH-TOKEN", token);

                        toolsApi.defaults.headers.common.Authorization = Cookie.get(
                            "AUTH-TOKEN"
                        );

                        commit("loginStatus", true);
                        this.$router.push({ name: "dashboard.index" });
                    }
                })
                .catch(error => {
                    console.log("Error");
                    console.log(error);
                });
        });
    }
}
 

Любые рекомендации по исправлению моего кода действительно мне очень помогут

/**** ОБНОВЛЕНИЕ ***/

Ответ на ошибку от API

 {
    "status": "error",
    "message": "Validation errors.",
    "errors": {
        "email": [
            "The email field is required."
        ],
        "password": [
            "The password field is required."
        ]
    }
}
 

В Магазине

 toolsApi
    .post("/api/auth/authenticate", loginForm)
    .then(response => {
        if (response.data.status == "success") {
            const token = `Bearer ${response.data.data.token}`;

            Cookie.set("AUTH-TOKEN", token);

            toolsApi.defaults.headers.common.Authorization = Cookie.get(
                "AUTH-TOKEN"
            );

            commit("setLoginStatus", true);
            resolve(response.data.data);
            // this.$router.push({ name: "dashboard.index" });
        }
    })
    .catch(error => {
        reject(error);
    });
 

Попробуйте вернуться toolsApi.get(...) из [AUTH_AUTHENTICATE] действия, а затем получите доступ к нему, как обещано. Еще один способ вызвать исключение в действии и поймать его на странице входа в систему.