Api Integration

In Skote Vue, a fake backend setup is included by default. All the files related to API integrations can be located within the src/helpers folder. While we've provided a fake backend for your convenience, you have the flexibility to remove it and replace it with your custom API by following the steps outlined in the src/helpers directory.

  • src/helpers/authservice/user.service.js file contains axios setup to call server API(s) including get, put, post, delete, etc methods & interceptors.

Note : we have added a Fake backend setup just for user interactions, but if you are working with the real API integration, then there is no need of fake-backend so you can simply delete the file src/helpers/fake-backend.js, and remove the code related to Fake-Backend from main.js file, that's it!
How to Integrate custom API?

Please follow the below steps :

firsty, add VUE_APP_URL:YOUR_KEY in your .env file.

As a second step add index.js file in src/helpers folder.

In that file put bellowed code. 
                                
export const apiKey = process.env.VUE_APP_URL // api key from the .env

export function authHeader() {
    // return authorization header with token from localstorage
    let user = JSON.parse(localStorage.getItem('user'));
    if (user && user.token) {
    return {
    'Authorization': 'Bearer ' + user.token,
    headers: { 'Content-Type': 'application/json' },
    };
    } else {
    return {
    headers: { 'Content-Type': 'application/json' },
    };
    }
}

Here, token is from localstorage. You can modify it as per your requirement.

Next task is to add one service. Let's assume that we have one service for products. So, create one file named productService.js in /src/helpers/services folder.
Below is a code for the reference. In this code we have provided one class which is having one method name getProducts(). It is giving list of the product. 
                                
import { apiKey, authHeader } from '..'
export default class ProductService {
    constructor() {
    this.baseUrl = apiKey
    }

    getProducts() {
    const requestBody = {
    method: "GET",
    headers: authHeader()
    }
    return fetch(`${this.baseUrl}`, requestBody)
    .then(response => response.json())
    .then(data => data)
    }
}
In src/helpers folder we will have one anothe file called services.js which is having all of our services. Like belowe, 
                                
import ProductService from './services/productService'
const productService = new ProductService()
    
export {
productService
}
And finally, when we want to use that product service in our code. So follow the process as per belowe 
...
import { productService } from '@/helpers/services.js'

methods: {
        async getProducts() {
            const data = await productService.getPosts()
            console.log('data', data);
        }
    }
That'it! initialozation of new service is done. Now you can as many as service you want.
© Skote.