0

I'm a vue.js frontend intern, my lead developer is testing my skills to clone the company web app's login page. I have an account with the app(username and password), but I totally have no idea how to do it, the only information I know is to use axios to make a post request to the server to get authenticated so I can retrieve data from the server and build the page after login.

Sorry if this sounds confusing, I've been searching around and found nothing, basically because I don't know what to search for, I'm really bad with HTTP requests and ajax stuff. If lucky enough you can understand what I mean please help thank you so much.

Some useful articles can help as well, I can totally work this out myself, I just don't where to get started

Shien Y
  • 1
  • 4
  • 3
    There is a lot of material that can be found if you google keywords from this question title. As per StackOverflow [guidelines](https://stackoverflow.com/help/on-topic): Questions asking us to recommend or find a book, tool, software library, tutorial or other off-site resource are off-topic. – aBiscuit Feb 23 '19 at 11:35
  • 1
    @aBiscuit, "google" is kind of a tigger word in the comments. Always true, but mostly uninformative. If it's an easy google (to you), consider inlinining some of the worthwhile content as a link in the comments. It's it's not an easy google, it might not be an easy rabbit hole for a beginner or anyone else who lands on this page (via google) in the future. That said, the question is really just too broad to be able to be answered by a single resource or reference, and, as such, should get broken up into smaller problems by OP – KyleMit Feb 23 '19 at 15:48
  • @KyleMit thank you, I understand your point and agree. Putting "google keywords" into a comment seemed to be reasonable advice in this case just because searching for "vue.js login axios" returned a comprehensive list of articles that would probably be better than any answer given here. While tagging post as "too broad" would be not helpful to OP. I tried). Thank you for comment. – aBiscuit Feb 23 '19 at 16:36
  • I found this article (https://scotch.io/tutorials/vue-authentication-and-route-handling-using-vue-router) by Christian Nwamba (@codebeast) to be a great starter template to implement authentication in Vue. – Steven Vanden Broucke Feb 26 '19 at 07:57

1 Answers1

1

I don't know how Vue works but I'll try to explain the general concept.

Most single page JavaScript web app frameworks uses what's called a state to store the state of the application (like whether user is logged in or not, etc). Here's how it works:

  • You will have a login page containing a form
  • On form submit, you'll send an ajax request to the authentication server (in this case your company's one)
  • Based on the response, you'll set the proper set (i.e loggedIn: true, or something like that). Now based on this state, you will either redirect to a different page or show an error message on the same page.
  • On the new page, you'll pull data from the server and show it.

Now, you can do the ajax stuff in several ways. Since you're new to ajax, I'd suggest knowing the basic concept. Googling can helpk, or this. You will see that it's done by XMLHttpRequest.

axios (and several other http req libraries) makes life a lot easier by letting you write lot less code which looks a lot cleaner too. But internally, AFAIK they all uses the same thing, i.e XMLHttpRequest. Have a look at this. Scroll down to the Example section, you'll see how a Post request is made.

TIP: Try out axiosin a new project. Try sending a post request to your company's auth address(which your intern leader should have already informed you) and console.log() the response to see how it looks. Make sure to use the correct keys.

Also, a simple google search for "login page with vue and axios" brought me this. Also you might find this post helpful later.

Hope this helps!

PS: You should have googled first. Asking for recommendations is something advised not to do on this website as aBiscuit has mentioned in his comment.

Raihanul
  • 91
  • 1
  • 5