Scribd
Upload
2 views5 pages

Backendapi

The document explains how to set up an Express server with routes for authentication, events, and bookings, all prefixed with '/api'. It details how Axios is configured with a base URL of 'http://localhost:5000/api' to simplify API calls, allowing for cleaner requests without repeating the base path. Additionally, it describes the use of an Axios interceptor to automatically include a JWT token in the headers of requests for authorization.

Uploaded by

Vikash Tripathi
Copyright
© All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
2 views5 pages

Backendapi

The document explains how to set up an Express server with routes for authentication, events, and bookings, all prefixed with '/api'. It details how Axios is configured with a base URL of 'http://localhost:5000/api' to simplify API calls, allowing for cleaner requests without repeating the base path. Additionally, it describes the use of an Axios interceptor to automatically include a JWT token in the headers of requests for authorization.

Uploaded by

Vikash Tripathi
Copyright
© All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd

Your backend is running on:

[Link](PORT, () => [Link](`Server running on port ${PORT}`));

where

const PORT = [Link] || 5000;

So your server starts at

[Link]

THEN YOU MOUNTED YOUR ROUTES

[Link]('/api/auth', authRoutes);
[Link]('/api/events', eventRoutes);
[Link]('/api/bookings', bookingRoutes);

This means Express prefixes every route with these paths.

For example, suppose [Link] contains

[Link]('/login', login);
[Link]('/register', register);

The actual URLs become

POST [Link]

POST [Link]

Similarly, if [Link] contains

[Link]('/');
[Link]('/:id');
[Link]('/');

The URLs become

GET [Link]

GET [Link]

POST [Link]
And for bookings

[Link]('/my');

becomes

GET [Link]

WHY IS YOUR AXIOS BASEURL ONLY THIS?

const api = [Link]({


baseURL: '[Link]
});

Because /api is common to all your routes.

Then you simply call

[Link]('/auth/login', data);

Axios combines them.

baseURL
+
endpoint

[Link]
+
/auth/login

[Link]

EXAMPLE 1: LOGIN

[Link]('/auth/login', {
email,
password
});
Request goes to

POST [Link]

EXAMPLE 2: REGISTER

[Link]('/auth/register', userData);

Actual URL

POST [Link]

EXAMPLE 3: GET EVENTS

[Link]('/events');

Actual URL

GET [Link]

EXAMPLE 4: BOOK EVENT

[Link]('/bookings', bookingData);

Actual URL

POST [Link]

WHAT DOES THE INTERCEPTOR DO?

[Link]((config) => {
const token = [Link]('token');

if (token) {
[Link] = `Bearer ${token}`;
}

return config;
});

This runs before every request.

Suppose after login your frontend stores


[Link]("token", jwtToken);

Now whenever you write

[Link]('/bookings/my');

Axios automatically changes it to

GET /api/bookings/my
Host: localhost:5000

Authorization: Bearer eyJhbGciOiJIUzI1Ni...

So you don't need to manually add the token to every request.

COMPLETE FLOW

Frontend

[Link]('/events')

Axios

baseURL = [Link]

Final URL

[Link]

Interceptor executes

↓
Adds JWT Token

Authorization: Bearer eyJhbGc...

Express receives request

[Link]('/api/events', eventRoutes)

events router

Controller

Database

Response

This is why your baseURL is [Link] instead of


[Link] or .../events —because /api is the
common prefix shared by all your route groups.

You might also like