Почему я получаю это поведение HTTP-вызова с Axios? - PullRequest
0 голосов
/ 02 декабря 2018

Я создаю переход от простых маршрутов и использую простые фильтры ..

На моем первом маршруте, который / LOGIN , у меня есть базовыйФорма входаЯ использую axios, чтобы дать POST в моем маршруте / login / authentication / , и в случае положительного результата я даю replace в url перенаправить на другой маршрут, который является / HOME .

В маршруте / HOME у меня есть базовая форма фильтрации, и нажатие кнопки отправки формы дает AXIOS (GET) запрос от моего / LOGIN маршрута, а не POST запроса этой формы фильтра.

Это то, что происходиткогда я отправляю запрос типа POST из фильтра формы в маршруте / HOME : enter image description here

FORM - ВХОДROUTER CLASS:

class LoginForm extends Form {
    constructor(id){
        super(id);

        // FL:     FORM LOGIN
        // FLUI:   FORM LOGIN USERNAME INPUT 
        // FLUPI:  FORM LOGIN USERNAME-PASSWORD INPUT
        // FBSL:   FORM BUTTON SUBMIT LOGIN
        // FBMEUI: FORM BACKEND MESSAGE ERROR USER INFORMATIONS
        this.form           = document.getElementById(this.id);
        this.username       = document.getElementById('FLUI');
        this.password       = document.getElementById('FLUPI');
        this.btnSubmit      = document.getElementById('FBSL');
        this.backendMessage = document.getElementById('FBMEUI');
    }

    get usernameValue(){ return this.username.value; }
    get passwordValue(){ return this.password.value; }

    /** @description MANIPULA TODA A LÓGICA DO FORMULÁRIO */
    create(){
        this.verifyInputsValue();

        // ESCUTA O EVENTO 'SUBMIT' DO FORMULÁRIO
        this.btnSubmit.addEventListener('click', event => {
            event.preventDefault();
            event.stopImmediatePropagation();

            this.form.setAttribute('class', 'was-validated');

            this.clearLoginButton();
            this.createLoginLoading();

            // VERIFICA SE O FORMULÁRIO ESTÁ VÁLIDO
            if(!this.form.checkValidity()){
                event.stopImmediatePropagation();

                this.clearLoginButton()
                this.createLoginText();
            } else {
                const httpRequest = new HTTP();
                httpRequest.postUserAuthentication(this.usernameValue, this.passwordValue).then((response) => {
                    console.log(response)
                    this.redirectURL(response.data.token);
                }).catch(() => {
                    this.clearLoginButton();
                    this.createLoginText();

                    super.clearInvalidFeedback(this.backendMessage);
                    this.createInvalidFeedback();
                });
            }
        });
    }

    /** @description CRIA A MENSAGEM RETORNADA DO BACKEND */
    createInvalidFeedback(){
        const brElement = document.createElement('BR');
        this.backendMessage.appendChild(document.createTextNode("Usuário ou senha inválidos!"));
        this.backendMessage.appendChild(brElement);
        this.backendMessage.appendChild(document.createTextNode("Caso precise de ajuda, clique em \" Precisa de Ajuda?\""))
    }

    /** @description CRIA O LOADING SPINNER */
    createLoginLoading(){
        const loadingSpinner = new LoadingSpinner();
        this.btnSubmit.appendChild(loadingSpinner.createMicrosoftType());
    }

    /** @description MANIPULA TODA A LÓGICA DO FORMULÁRIO */
    createLoginText(){
        this.btnSubmit.appendChild(document.createTextNode("LOGIN"));
    }

    /** @description LIMPA O CONTAINER DO BOTÃO DE LOGIN */
    clearLoginButton(){
        this.btnSubmit.firstChild.remove();
    }

    /** @description BLOQUEIA DETERMINADOS CARACTERES A SEREM DIGITADOS NOS INPUTS */
    verifyInputsValue(){
        this.username.addEventListener('keypress', event => {
            super.cancelDefaultValidation(this.username);
            super.blockSpecialCharacters(event, ["!", "@", "#", "$", "%", "¨", "&", "*", "(", ")", "_", "-", "+", "=", "`", "´", "[", "]", "{", "}", "^", "~", "<", ">", ",", ";", ":", "?", "/", "\"", "\'", "|", "\\", "Ç", " "]);
        });

        this.password.addEventListener('keypress', event => {
            super.cancelDefaultValidation(this.password);
            super.blockSpecialCharacters(event, [" "]);
        });
    }

    /** @description REDIRECIONA A URL PARA OUTRA ROTA, UTILIZANDO O MÉTODO GET */
    redirectURL(token){
        window.location.replace(`http://localhost:3000/home/v1/?token=${token}`);
    }

}

FORM - / HOME FILTER CLASS

/** @description: É ACIONADO QUANDO O HTML FOI COMPLETAMENTE CARREGADO E ANALISADO, SEM AGUARDAR POR FOLHA DE ESTILOS, IMAGENS E SUBFRAMES PARA ENCERRAR O CARREGAMENTO */
window.addEventListener('DOMContentLoaded', () => {
    const btnSubmit = document.getElementById('FBSF');
    btnSubmit.addEventListener('click', (event) => {
        event.preventDefault();
        event.stopImmediatePropagation();

        const httpRequest = new HTTP();
        httpRequest.postFilter("shoppingId", "storeId", "periodOf", "periodUntil", "kpi", "select").then(response => {
            console.log(response)
        }).catch(error => {
            console.log(error)
        });


    });

});

HTTP AXIOS- КОНТРОЛЛЕР

class HTTP {

    async postFilter(shoppingId, storeId, periodOf, periodUntil, kpi, select){
        return await axios.post('/home/v1/filter/', {
            shoppingId:  shoppingId,
            storeId:     storeId,
            periodOf:    periodOf,
            periodUntil: periodUntil,
            kpi:         kpi,
            select:      select
        }, {
            method: 'POST'
        });
    }

    async postUserAuthentication(username, userPwd){
        return await axios.post('/login/authentication/', {
            username: username,
            password: userPwd
        });
    }
}
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...