VueJs Consumer App – Laravel API with Passport
Hello everyone! Welcome back to justlaravel.com, am back with another tutorial. Here I will show you how to consume a Laravel API with passport authentication in Vuejs app. In an earlier post, I have shown you how to integrate passport API into your Laravel apps. As a continuation, I will create a VueJs consumer app here in this tutorial.
You can also watch the video on YouTube here.
Working Demo Project on Github
Vuejs Consumer App – Create
Let’s create a new Vue standalone app using Vue CLI.
To use Vue CLI, first, we must have it installed in our system. If it is not already installed, just run the following command.
1 | npm install -g @vue/cli |
Now let’s create a new Vue app, run the following command.
1 | vue create test-app |
Click enter for all the default settings to be used for the project. You will see a similar screen as below after creating the app.
Working Demo Project on Github
Install Axios for making API Calls
As I need to call the API here, I use Axios to do all HTTP requests and handle responses. So let us install it. Run the following command to install Axios.
1 | npm install --save axios vue-axios |
So after installing it, let us use it in our Vue app.
In App.vue file at src\App.vue import the axios package.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 | <template> ...... </template> <script> import Vue from 'vue' import axios from 'axios'; Vue.use(axios); .... ... ... </script> <style> .... </style> |
axios is ready to use, we can make any HTTP requests through our app now, anyway we are going to call the API which I created earlier here.
Working Demo Project on Github
VueJs Consumer App – Make API calls
Here am trying accessing data from an API protected with passport. So first I need to register to the API and get the credentials like client_secret, client_id and using those credentials I can authenticate the API, get the access_token and then use that access_token to get the data I need. See the gif below for registration and obtaining credentials.
So there are 2 API calls here:
- Authenticate the API to get
access_token - Get the data using the
access_tokengenerated in step above.
The API call to get access_token:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | axios.post('https://demos.justlaravel.com/integrate-passport-laravel-api/oauth/token', { client_id: 726, client_secret: 'fKYvdfdcJu0a13xQ8pB4ycRpbiwcEGXz5Tp3n6rHc5', grant_type: 'password', username: 'test@test.com', password: '111111', scope: '*', }) .then(response => { this.access_token = response['data']['access_token']; this.get_users_data() }) .catch(response => { console.log(response) }); |
In the above snippet, I made a POST call the API to get the access token with parameters client_id, client_secret which I got after registering to the API and also the email and password I used when registering to the Laravel API.
In the then(success) function, I store the access token in a variable and call another function get_user_data, where I can get the actual data I need.
The API call to get user data:
1 2 3 4 5 6 7 8 9 10 11 12 | axios.get('https://demos.justlaravel.com/integrate-passport-laravel-api/api/users',{ headers: { Authorization: 'Bearer ' + this.access_token } }) .then(response => { this.user_data = response['data']; return this.user_data; }) .catch(response => { console.log(response) }); |
In the above snippet, to the get the user details a GET call is made to the users endpoint of the API along with passing access token as an Authorization header to the call.
Now in the then(success) function, I return the obtained data, which can be displayed onto a page in a way we need.
So let us display the results.
Working Demo Project on Github
VueJs Consumer App – Display results
For displaying the user details, I will just create a basic HTML table and show the details there. Here I use v-for directive to loop through the data.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 | <template> <div> <table> <tr> <th>id</th> <th>name</th> <th>email</th> </tr> <tr v-for="user in user_data"> <td>{{user.id}}</td> <td>{{user.name}}</td> <td>{{user.email}}</td> </tr> </table> </div> </template> |
The result looks as below.
Working Demo Project on Github
Also feel free to look at the previous post which tells you how to create an API in Laravel, integrated with passport or have a look at all the tutorials on Vue.js