[Vuejs]-Laravel how to post data to a protected route using axios and vue

by

0👍

✅

Laravel have a good package for API authentication called Passport
, so after configured, it create the routes for require and return the token. To request it’s http://{domain}/oauth/token.

When the user try to log in, Vue must send a post request with axios passing the user data. If the user have access, the token it’s returned.

To protect your routes you can use middleware('auth:api'). Passport uses this middleware to validate the token.

ie:

<script>
  userData = {
    ...
  },
  axios.post('http://{domain}/oauth/token', userData) {
    .then(function (response) {
      console.log(response.access_token)
      ... redirect to dashboard or something else
    }
  }
  ...
  </script>

As you may know, the token has to be passed in every client request, and a way to do this is passing the token in the HTTP request header. Fortunately Passport already do this for you.

Hope it helps.

Leave a comment