Я создаю переход от простых маршрутов и использую простые фильтры ..
На моем первом маршруте, который / LOGIN , у меня есть базовыйФорма входаЯ использую axios, чтобы дать POST в моем маршруте / login / authentication / , и в случае положительного результата я даю replace в url перенаправить на другой маршрут, который является / HOME .
В маршруте / HOME у меня есть базовая форма фильтрации, и нажатие кнопки отправки формы дает AXIOS (GET) запрос от моего / LOGIN маршрута, а не POST запроса этой формы фильтра.
Это то, что происходиткогда я отправляю запрос типа POST из фильтра формы в маршруте / HOME : ![enter image description here](https://i.stack.imgur.com/WkSvb.png)
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
});
}
}