How to Integrate custom API?

Please follow the below steps to make the custom API working.

1. Let's assume that our API's URL is "https://jsonplaceholder.typicode.com/posts"

                                               
   import axios from 'axios'
       ...
   mounted() {
       axios.get('https://jsonplaceholder.typicode.com/posts').then(data=>{
           this.data=data;
       }).catch(e=>{
           console.log('error',e);
       })
   },
                                               



2. let's setup auth middleware with api.

   to setup middleware change below code in src/router/index.js. this will check user is authenticated or not.

   
       import axios from 'axios'
       ...
       
       router.beforeEach(async (routeTo, routeFrom, next) => {
   
           const authRequired = routeTo.matched.some((route) => route.meta.authRequired)
           
           if (!authRequired) return next()
           
           axios.defaults.headers.common['authorization'] = 'Bearer ' + localStorage.getItem('jwt') // for all requests
           await axios.get('https://jsonplaceholder.typicode.com/posts').then((data) => {
               localStorage.setItem('userdata', JSON.stringify(data.user))
               localStorage.setItem('userid', data.user._id)
               next()
           }).catch(() => {
               next({ name: 'login', query: { redirectFrom: routeTo.fullPath } })
           });
       })
   



3. Now set post method api for signup with below function

                                               
   import axios from 'axios'
       ...
   methods: {
       async tryToRegisterIn() {
           this.submitted = true;
           // stop here if form is invalid
           this.v$.$touch();
           const result = await axios.post('https://jsonplaceholder.typicode.com/posts', {
             email: this.email,
             password: this.password,
             confirm_password: this.confirm_password
           })
           if (result.data.status == 'errors') {
             this.isRegisterError = true
             return this.regError = result.data.message;
           }
           localStorage.setItem('jwt', result.data.token)
           this.$router.push({
             path: '/'
           });
   
         },
       },
                                               



4. Database setup for Backend api

   -MongoDB Compass(option 1)

   Make sure to have the MongoDB Compass installed & running in your computer. If you already have installed compass on your computer, you can skip this step.

   STEP-1: open compass and connect with localhost

   

   ---

   -MongoDB Atlas(option 2)

   Make sure to have Account in MongoDB Atlas. If you don't have account then create Atlas account and follow below steps to connect with MongoDb Atlas.

   STEP-1: Create account

   
   
   

   STEP-2: After verifying email click on build Database

   
   
   

   STEP-3: Choose shared database for free...

   
   
   

   STEP-4: Click on create cluster

   
   
   

   STEP-5: Wait until the process is completed and then click on connect

   
   
   

   STEP-6: Select your current ip address and then create your username and password then click on create database.

   
   
   

   STEP-7: After that, click on second option "connect your application" (if you don't see any model then click on connect)

   
   
   

   STEP-8: Now copy the given link and close the model

   
   
   

   STEP-9: Now Open 'config.env' In Node API and then paste the link in DATABASE=" " And then add your password in DATABASE_PASSWORD=" ".

   STEP-10: Now click on Collections and then click Add My Own Data

   
   
   

   STEP-11: Then Enter your database name and collection(table) name