I may not be familiar with the inner workings of Vue, but I can provide a general overview of how it operates.
Most frameworks for single page JavaScript web apps utilize a concept known as state
to maintain the application's current state (such as user login status, etc). Here is a basic outline of how this works:
- Start with a login page that includes a form
- Upon submitting the form, an ajax request is sent to the authentication server (in this case, your company's server)
- Based on the response, the appropriate "state" is set (e.g., loggedIn: true) which determines whether to redirect to another page or display an error message on the same page
- On the new page, data is retrieved from the server and displayed
There are various ways to handle ajax operations. For beginners, understanding the fundamental concept is key. Resources such as Google or this link can be helpful. You will notice that XMLHttpRequest is commonly used.
Axios
(along with other http request libraries) simplifies the process by reducing the amount of code required and making it more readable. However, they all essentially use XMLHttpRequest internally. More information can be found in the Example section of this link.
TIP:
Experiment with axios
in a new project. Try sending a post request to your company's authentication address (likely provided by your internship mentor), then use console.log()
to view the response format. Ensure correct keys are utilized.
In addition, conducting a simple search for "login page with vue and axios" revealed this resource. Another potentially useful post can be found here.
Hopefully, this information proves beneficial!
PS: It's generally recommended to conduct initial research before seeking recommendations, as highlighted by aBiscuit in their comment.