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.