Handlers Personalizados

Vou te guiar por um tour sobre como criar e utilizar handlers personalizados no Mirage JS, focando no middleware, na interceptação de requests e, como exemplo prático, implementaremos uma autenticação e autorização básica.

Criando e Utilizando Handlers Personalizados

No Mirage JS, um handler personalizado permite que você defina comportamentos específicos para as requisições à sua API simulada. Isso é útil para simular cenários mais complexos ou comportamentos específicos de sua API que o Mirage pode não suportar diretamente.

Estrutura Básica de um Handler em TypeScript

Aqui está como você pode estruturar um handler personalizado em TypeScript:

import { Response, Request } from "miragejs";

// Função handler personalizada
function meuHandlerPersonalizado(schema: any, request: Request): Response {
  const dados = JSON.parse(request.requestBody);
  // Lógica personalizada aqui
  return new Response(200, {}, { data: dados });
}

Middleware e Intercepção de Requests

Middleware no contexto do Mirage JS refere-se a funções que têm a capacidade de interceptar requests e modificar respostas. Isso é extremamente útil para simular comportamentos como autenticação e logging.

import { Server, Request } from "miragejs";

new Server({
  routes() {
    this.passthrough("/_next/static/development/_devPagesManifest.json");
    this.namespace = "api";

    this.post("/login", (schema, request) => {
      return meuHandlerPersonalizado(schema, request);
    });

    // Middleware para interceptar todas as requests
    this.pretender.handledRequest = (verb, path, request) => {
      console.log(`Intercepted ${verb} to ${path}`);
    };
  },
});

Exemplo Prático: Autenticação e Autorização Básica

Vamos criar um exemplo prático onde implementaremos autenticação e autorização básicas. No nosso cenário, o usuário deve fornecer um nome de usuário e senha corretos para receber um token de acesso.

import { Server, Response } from "miragejs";

new Server({
  routes() {
    this.namespace = "api";

    this.post("/login", (schema, request) => {
      const { username, password } = JSON.parse(request.requestBody);

      if (username === "admin" && password === "admin") {
        return new Response(200, {}, { token: "fake_token" });
      } else {
        return new Response(401, {}, { error: "Credenciais inválidas" });
      }
    });

    this.get("/secret-data", (schema, request) => {
      const token = request.requestHeaders["Authorization"];

      if (token === "Bearer fake_token") {
        return new Response(200, {}, { data: "Dados secretos" });
      } else {
        return new Response(403, {}, { error: "Não autorizado" });
      }
    });
  },
});

Nesse exemplo, o endpoint /login verifica as credenciais e, se forem corretas, retorna um token de acesso. O endpoint /secret-data requer que esse token seja fornecido no cabeçalho da requisição para acessar dados protegidos.

Essa abordagem te permite simular aspectos de autenticação e autorização no desenvolvimento front-end sem depender de um back-end real, facilitando o teste e a prototipação de interfaces que dependem de estados de autenticação.