3
Hello,
I’m developing an application and setting up a user registration screen, but I’m wondering if it’s possible to hide the data that Axios is requesting for the API. My Javascript code, which I implement by EJS is as follows:
filing cabinet signup.esj
that includes Javascript on the page:
<script src="<%= public_path + '/js/wp-signup.js' %>"></script>
filing cabinet wp-signup.js
who is responsible for making the POST request and saving the data to Mongodb:
import axios from 'axios';
class App {
constructor() {
this.nameEl = document.getElementById('register-name');
this.lastnameEl = document.getElementById('register-lastname');
this.emailEl = document.getElementById('register-email');
this.passwordEl = document.getElementById('register-password');
this.agreeEl = document.getElementById('register-agree');
this.formEl = document.getElementById('register-form');
this.successMessage = document.getElementById('register-success');
this.events();
}
events() {
this.formEl.onsubmit = () => this.makePostRequest();
}
async makePostRequest() {
event.preventDefault();
await axios({
method: "post",
url: 'http://localhost:3000/users',
},
data: { name: this.nameEl.value, lastname: this.lastnameEl.value, email: this.emailEl.value, password: this.passwordEl.value }
})
.then( (response) => {
this.successMessage.innerHTML = response.data.message;
})
.catch( (error) => {
this.errorMessage.innerHTML = error.response.data.error;
})
}
}
new App();
There’s no problem with the code, what I’d like to know is:
If the user accesses the developer tab (F12 in Chrome) and goes to
SOURCES > PUBLIC > JS > wp-signup.js
which is the file where the above code is, it will see all the process I do for checking up the POST request, besides the payload of the request, is there any way to hide it from the user ? There is a more advised way to do this type of operation using NodeJS/EJS/JavaScript/MongoDB
?
have you ever tried to use Babel to transpose your code? either way you can choose to use a SPA Instead.
– Juliano Henrique