Comunicación con backend desde frontend - Solify-IT/psyche-ing GitHub Wiki

Objetivo

• Dar a conocer la capa de API en frontend encargada de comunicarse directamente con el servicio de backend.

Capa de API

Como estándar de la arquitectura del módulo de frontend del proyecto PSYQUE-ing, toda la comunicación directa con el backend deberá estar dentro de la capa de API que se encuentra dentro de la carpeta con el mismo nombre. Esto nos ayuda a separar la lógica interna de frontend y pone a la API como un intermedio que pueda ser reutilizable en varios componentes del frontend.

En el diagrama anterior, se puede apreciar como la capa API o "Data access layer" es la encargada de comunicarse con servicios externos y almacenar cualquier dato que deba ser almacenado localmente.

Authentication Service

Este archivo en la capa API se encarga de almacenar la información y el estado del usuario autenticado durante la sesión completa del frontend. En este archivo se maneja el inicio y el cierre de la sesión como también se maneja la información local del usuario que por conveniencia y rapidez es guardada localmente para evitar pedir información sobre el usuario frequentemente.

Server

La librería utilizada para hacer llamadas asíncronas de tipo HTTP es axios. Para manejar una instancia global de axios con la ruta del backend y configuración adicional se utilizará una instancia de axios ubicada en utils/server.js.

const user = JSON.parse(localStorage.getItem('currentUser')) || '';
const SERVER_URL = process.env.REACT_APP_API_URL || 'http://127.0.0.1:8000';

const server = axios.create({
  baseURL: SERVER_URL,
  headers: {
    Authorization: `Bearer ${user.token}`,
    'Content-Type': 'application/json',
    'Access-Control-Allow-Origin': '*',
    'Access-Control-Allow-Methods': 'GET,PUT,POST,DELETE,PATCH,OPTIONS',
  },
});

El código anterior define la instancia de Axios, que define la url base del backend utilizando una variable de entorno o una dirección local por default. Para las peticiones de backend (excepto login) es necesario enviar un token de tipo JWT para ser autenticado efectivamente. Esto se define en el campo headers del código anterior.

Llamadas a endpoints

Los archivos que se encuentran dentro de la capa api se encargan de hacer peticiones a endpoints del backend. Por convención, una función deberá restringirse a sólo hacer una llamada a un endpoint para hacer estas funciones lo más atómicos posibles. La imagen siguiente mostrará un ejemplo de una llamada asíncrona a un endpoint de la API:

export async function getPatients() {
  const result = await server.get('/patients').then(handleResponse).catch(handleResponse);
  console.log(result);
  return result;
}

En la función anterior, se llama el endpoint /patients para obtener un listado de pacientes. La funciones dentro de la capa API casi siempre tendrán el decorador "async" ya que se manejan llamadas asíncronas. Para hacer la petición asíncrona de tipo HTTP se utiliza la instancia "server". Se espera que todas las peticiones al backend se hagan de esta forma.

Handleresponse

El middleware "handleResponse" se encarga de validar el resultado de la petición del backend y verifica el código de estado de la respuesta. Dependiendo del código, se puede cerrar la session y redirigir a la vista de login.

import { logout } from '../api/authenticationService';

export default function handleResponse(response:any) {
  if (response.request.status !== 200) {
    if ([401, 403].indexOf(response.request.status) !== -1) {
      logout();
      window.location.replace('/login');
      alert('¡Tu sesión ha caducado 😔!');
    }
    const error = response;
    return Promise.reject(error);
  }
  return response.data;
}