Axios Boot File and REST API Endpoints for Despacho Frontend

Lex Consultoría’s SPA communicates with a Node.js REST backend through the browser’s native fetch API and through Axios — both pointing at the same base URL. Axios is registered during Quasar’s boot phase so it is available globally across all Vue components without any per-file import. The backend exposes two groups of endpoints: unauthenticated endpoints for public-facing forms and auth-gated endpoints for the admin dashboard.

The default base URL is http://localhost:2101. When deploying to a staging or production environment, update the baseURL value in src/boot/axios.js (or inject it via an environment variable) and rebuild the app.

Axios Boot File — `src/boot/axios.js`

Quasar’s boot files run before the root Vue application mounts. The axios boot file creates a pre-configured api instance with baseURL set, then exposes both the raw axios object and the configured api instance as Vue global properties.

// src/boot/axios.js
import { defineBoot } from '#q-app/wrappers'
import axios from 'axios'

const api = axios.create({ baseURL: 'https://api.example.com' })

export default defineBoot(({ app }) => {
  // for use inside Vue files (Options API) through this.$axios and this.$api

  app.config.globalProperties.$axios = axios
  // ^ ^ ^ this will allow you to use this.$axios (for Vue Options API form)
  //       so you won't necessarily have to import axios in each vue file

  app.config.globalProperties.$api = api
  // ^ ^ ^ this will allow you to use this.$api (for Vue Options API form)
  //       so you can easily perform requests against your app's API
})

export { api }

The boot file is activated by listing "axios" in the boot array inside quasar.config.js:

// quasar.config.js
boot: ["axios"],

`$api` vs `$axios`

$api

An Axios instance pre-configured with baseURL. Use this for all requests to the Despacho backend — you only need to supply the path (e.g., /api/lawyer/user/login) rather than the full URL. Access it as this.$api (Options API) or import { api } from src/boot/axios.js (Composition API / script setup).

$axios

The raw, unmodified Axios constructor. Useful when you need to call a third-party URL that does not share the app’s base URL, or when you want to create an additional custom Axios instance with different interceptors or headers.

In <script setup> components (Composition API), you cannot use this. Import the configured instance directly:

import { api } from 'src/boot/axios.js'

const data = await api.post('/api/lawyer/user/login', { email, password })

Setting the Authorization Header

Authenticated endpoints require a Bearer token. The dashboardPage.vue pattern builds a Headers object from the validated user session:

// src/pages/users/whoWeAre/dashboardPage.vue — getAuthHeaders()
import { validateUser } from "../../../tools/User"

const getAuthHeaders = () => {
  const user = validateUser({ rol: 1 })
  if (!user) return router.push("/login")

  const headers = new Headers()
  headers.append("authorization", "Bearer " + user.token)
  headers.append("Content-Type", "application/json")
  return headers
}

When using Axios instead of fetch, pass the token in the headers config option:

import { api } from 'src/boot/axios.js'
import { validateUser } from 'src/tools/User'

const user = validateUser({ rol: 1 })
if (!user) return router.push('/login')

const { data } = await api.post('/api/form/reserve/list/reservation-all', {}, {
  headers: { authorization: `Bearer ${user.token}` }
})

Endpoint Reference

Authentication

POST /api/lawyer/user/login

Authenticates a user and returns a signed JWT token. No authorization header required.Request

POST http://localhost:2101/api/lawyer/user/login
Content-Type: application/json

{
  "email": "abogado@despacho.com",
  "password": "contraseña123"
}

string

required

The registered email address of the user. Must match the regex pattern validated on the frontend: at least 6 characters, valid user@domain.tld structure.

password

string

required

The user’s password. Minimum 8 characters enforced on the frontend before the request is sent.

Success Response

{
  "token": "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9..."
}

The frontend stores data.token in localStorage.setItem("token", data.token) and redirects to /dashboard.Failure ResponseThe response will not contain a token field. The frontend shows the Quasar notification "Credenciales incorrectas".

Reservations — Public

POST /api/form/reserve/create

Creates a new reservation request submitted by a potential client through the public contact form. No authentication required.Request

POST http://localhost:2101/api/form/reserve/create
Content-Type: application/json

{
  "full_name": "María García López",
  "email": "maria@example.com",
  "phone": "5551234567",
  "required_service": "Consultoría laboral",
  "preferred_date": "2025-08-15",
  "preferred_hour": "10:00",
  "additional_message": "Necesito orientación sobre un despido injustificado."
}

full_name

string

required

Full legal name of the person requesting the consultation.

string

required

Contact email address. Used by staff to follow up on the reservation.

phone

string

required

Contact phone number. Displayed in the dashboard reservation detail modal.

required_service

string

required

Description of the legal service the client is requesting (e.g., "Derecho familiar", "Consultoría laboral").

preferred_date

string

required

Client’s preferred appointment date in YYYY-MM-DD format.

preferred_hour

string

required

Client’s preferred appointment time in HH:MM (24-hour) format.

additional_message

string

Optional free-text field for any extra context the client wants to provide. Displayed in the dashboard under “Mensaje”.

Reservations — Admin (Bearer Token Required)

All endpoints in this group require a valid JWT in the authorization header:

authorization: Bearer <token>

The server responds with { code: 401 } or { code: 403 } when the token is missing, malformed, or expired. Always pass the response through ValidateSession(data, router) before reading data.data.

List All
List Accepted
List Pending
Accept / Modify
Delete

Returns every reservation regardless of acceptance status.

POST http://localhost:2101/api/form/reserve/list/reservation-all
authorization: Bearer <token>

Response

{
  "data": [
    {
      "_id": "6645abc123def456",
      "full_name": "Carlos Mendoza",
      "email": "carlos@example.com",
      "phone": "5559876543",
      "required_service": "Derecho penal",
      "preferred_date": "2025-08-20",
      "preferred_hour": "14:00",
      "additional_message": "",
      "reservation_accepted": false
    }
  ]
}

Used by dashboardPage.vue when the “Todas” filter button is clicked (cargarReservas('all')).

Returns only reservations where reservation_accepted is true.

POST http://localhost:2101/api/form/reserve/list/reservation-true
authorization: Bearer <token>

Response — same shape as List All, filtered to confirmed records. Triggered by the “Aceptadas” filter.

Returns only reservations where reservation_accepted is false.

POST http://localhost:2101/api/form/reserve/list/reservation-false
authorization: Bearer <token>

Response — same shape as List All, filtered to pending records. Triggered by the “Pendientes” filter.

Confirms a reservation or updates its scheduled date and time. The route parameter :id is the MongoDB _id of the reservation document.

POST http://localhost:2101/api/form/reserve/accept/:id/reserve
authorization: Bearer <token>
Content-Type: application/json

{
  "preferred_date": "2025-08-21",
  "preferred_hour": "15:30"
}

preferred_date

string

required

Confirmed or modified date for the appointment in YYYY-MM-DD format.

preferred_hour

string

required

Confirmed or modified time in HH:MM (24-hour) format.

This endpoint is used for both the “Confirmar” and “Modificar” actions in the dashboard. After a successful response, the dashboard calls cargarReservas() to refresh the table.

// src/pages/users/whoWeAre/dashboardPage.vue — confirmarReserva()
const raw = JSON.stringify({
  preferred_date: row.preferred_date,
  preferred_hour: row.preferred_hour,
})

const res = await fetch(`http://localhost:2101/api/form/reserve/accept/${row._id}/reserve`, {
  method: "POST",
  headers,
  body: raw,
})

const data = await res.json()
if (!ValidateSession(data, router)) return

Permanently deletes a reservation by its _id. No request body is required.

POST http://localhost:2101/api/form/reserve/remove/reservation/:id
authorization: Bearer <token>

// src/pages/users/whoWeAre/dashboardPage.vue — eliminar()
const response = await fetch(
  `http://localhost:2101/api/form/reserve/remove/reservation/${id}`,
  { method: "POST", headers },
)

After deletion the dashboard refreshes via cargarReservas().

Endpoint Summary

Method	Path	Auth	Purpose
`POST`	`/api/lawyer/user/login`	None	Authenticate and receive JWT
`POST`	`/api/form/reserve/create`	None	Submit public reservation form
`POST`	`/api/form/reserve/list/reservation-all`	Bearer	Fetch all reservations
`POST`	`/api/form/reserve/list/reservation-true`	Bearer	Fetch accepted reservations
`POST`	`/api/form/reserve/list/reservation-false`	Bearer	Fetch pending reservations
`POST`	`/api/form/reserve/accept/:id/reserve`	Bearer	Confirm or modify a reservation
`POST`	`/api/form/reserve/remove/reservation/:id`	Bearer	Delete a reservation

All mutation endpoints (accept, remove) use POST rather than PATCH/DELETE. Ensure your API client or proxy does not restrict or transform these to other HTTP methods.

Get Started

Core Concepts

Features

Configuration

Axios Boot File — `src/boot/axios.js`

`$api` vs `$axios`

$api

$axios

Setting the Authorization Header

Endpoint Reference

Authentication

Reservations — Public

Reservations — Admin (Bearer Token Required)

Endpoint Summary

Build docs developers (and LLMs) love

Get Started

Core Concepts

Features

Configuration

Documentation Index

​Axios Boot File — src/boot/axios.js

​$api vs $axios

$api

$axios

​Setting the Authorization Header

​Endpoint Reference

​Authentication

​Reservations — Public

​Reservations — Admin (Bearer Token Required)

​Endpoint Summary

Build docs developers (and LLMs) love

Axios Boot File — `src/boot/axios.js`

`$api` vs `$axios`

Setting the Authorization Header

Endpoint Reference

Authentication

Reservations — Public

Reservations — Admin (Bearer Token Required)

Endpoint Summary