Skip to main content

Documentation Index

Fetch the complete documentation index at: https://mintlify.com/fredy-rizo/ecommerce-delivery-frontend/llms.txt

Use this file to discover all available pages before exploring further.

Ecommerce Delivery enforces access control through a role system stored on the authenticated user object. Each user carries a roles array containing one or more role entries, and the validateUser utility in src/tools/User.js checks those roles on both navigation and before protected API calls. Understanding the three roles and how they are evaluated is key to working with any feature that restricts content by user type.

​
Roles

Role NameValueAccess Level
usuario1Browse the store, add items to cart, place orders, view own purchase history
admin2Full access — product CRUD, sales reports, member management, delivery status updates
promotor3Same as usuario, plus access to the Shopping List (/shoppingList)

​
How roles are checked

The validateUser function from src/tools/User.js is the single source of truth for all client-side role checks. It accepts a data object with a rol property that can be either a single role value or an array of values. 
// src/tools/User.js
const validateUser = (data) => {
  const dataUser = JSON.parse(
    localStorage.getItem("user")
      ? localStorage.getItem("user")
      : '{"id":"1","name":"Invitado","roles":[{"name":"usuario","value":"1"}],"membership":{"status":{"code":3,"status":"Cancelado"},"expdate":"","duedate":"","value":""}}'
  );
  const token = localStorage.getItem("token");

  // Admin (value 2) always passes, regardless of the requested role
  if (dataUser.roles && dataUser.roles[0].value == 2) {
    return { ...dataUser, token };
  }

  // Permitir rol simple o múltiples
  const userRoles = dataUser.roles.map(r => Number(r.value));
  const allowedRoles = Array.isArray(data.rol) ? data.rol.map(Number) : [Number(data.rol)];

  const hasRole = allowedRoles.some(r => userRoles.includes(r));

  return hasRole ? { ...dataUser, token } : false;
};
Admin shortcut: if the first role in the user’s roles array has value == 2, the check passes unconditionally — admins always have access regardless of what data.rol specifies. Single role check — require a specific role: 
// Require admin
const session = validateUser({ rol: 2 });
if (!session) router.push("/login");
Multiple roles check — allow any one of the listed roles (OR logic): 
// Allow usuario OR promotor
const session = validateUser({ rol: [1, 3] });
if (!session) router.push("/login");
When validateUser returns false, the calling component typically redirects to /login or shows an unauthorized notification.

​
Role-gated UI example

The main store page (pages/store/MainStore.vue) uses the dataUser object returned by getDataUser() to conditionally render the Agregar (Add Product) button. Only users whose roles array contains an entry with value == 2 see the button: 
<!-- pages/store/MainStore.vue -->
<div
  class="col-auto flex items-center q-ml-md"
  v-if="dataUser.roles.find((itm) => itm.value == 2)"
>
  <q-btn
    color="green-7"
    label="Agregar"
    unelevated
    no-caps
    @click="dialogmdel = true"
  />
</div>
The script block retrieves the user at component setup time: 
// pages/store/MainStore.vue
import { validateUser, ValidateSession, getDataUser } from "../../tools/User";

// In setup()
const dataUser = getDataUser();

// Before each protected fetch:
const sessionUser = validateUser({ rol: 1 });
if (!sessionUser) {
  router.push("/login");
  return;
}
This pattern — call getDataUser() once to bind the user object to reactive state, then call validateUser({ rol }) before every network request — is used consistently across the application.

​
Stored role format

Roles are stored inside the user object as an array of objects, each with a name string and a value string (numeric value as a string): 
{
  "id": "42",
  "name": "jane doe",
  "email": "jane@example.com",
  "roles": [
    { "name": "admin", "value": "2" }
  ],
  "membership": {
    "status": { "code": 1, "status": "Activo" },
    "expdate": "2025-12-31",
    "duedate": "2025-12-31",
    "value": "premium"
  }
}
A user with role promotor would have [{ "name": "promotor", "value": "3" }]. The validateUser function coerces value to Number before comparison, so both "3" and 3 are treated equally.
Role checks in validateUser and v-if directives are client-side only. A user who manipulates localStorage directly could bypass them in the browser. Always enforce authorization server-side in your API routes — the backend must independently verify the JWT and the user’s role on every protected endpoint.

Build docs developers (and LLMs) love

Get started for freeTalk to us