Site

Consumindo a API em JavaScript / Fetch v3

SPA, painel Vue/React, app mobile (Capacitor) ou script no tema. O mesmo JSON da HTTP Data.


Login e sessão de token

Fetch

const API = '/api';

export async function login(username, password) {
  const res = await fetch(`${API}/login`, {
    method: 'POST',
    headers: {
      Accept: 'application/json',
      'Content-Type': 'application/json',
    },
    body: JSON.stringify({username, password}),
  });

  const data = await res.json();
  if (!data.success) throw new Error(data.error || 'Falha no login');

  sessionStorage.setItem('mucrm_token', data.token);
  return data.token;
}

export function authHeaders() {
  const token = sessionStorage.getItem('mucrm_token');
  return {
    Accept: 'application/json',
    'Content-Type': 'application/json',
    ...(token ? {Authorization: `Bearer ${token}`} : {} ),
  };
}

export async function me() {
  const res = await fetch(`${API}/me`, {
    method: 'POST',
    headers: authHeaders(),
  });
  if (res.status === 401) {
    sessionStorage.removeItem('mucrm_token');
    throw new Error('Unauthenticated');
  }
  return res.json();
}

export async function logout() {
  await fetch(`${API}/logout`, {method: 'POST', headers: authHeaders()});
  sessionStorage.removeItem('mucrm_token');
}

Tratar 422

const res = await fetch('/api/algum-endpoint', {
  method: 'POST',
  headers: authHeaders(),
  body: JSON.stringify(form),
});

if (res.status === 422) {
  const {errors} = await res.json();
  Object.entries(errors).forEach(([field, message]) => {
    const el = document.querySelector(`[data-error="${field}"]`);
    if (el) el.textContent = message;
  });
  return;
}

cURL

curl -X POST https://seu-site.com/api/login \
  -H "Accept: application/json" \
  -H "Content-Type: application/json" \
  -d '{\"username\":\"admin\",\"password\":\"senha\"}'
💡XSS
Se o token estiver em localStorage/sessionStorage, qualquer XSS o rouba. Prefira temas sem HTML livre de usuários e CSP rigoroso. Em apps server-rendered, cookies HttpOnly (sessão web v1) continuam melhores para o site clássico.

Documentação completa: Autenticação · Envelope JSON.