El router de una SPA: rutas con parámetros, guardianes e historial

1const lineas = require("fs").readFileSync(0, "utf8").split("\n");
2
3let sesion = null;          // nombre del usuario conectado, o null
4
5// Las rutas de la aplicación, como las de Vue Router o React Router (gana la primera que coincide)
6const RUTAS = [
7  { patron: "/", vista: () => "Inicio" },
8  { patron: "/inicio", redirigir: "/" },
9  { patron: "/login", vista: () => "Formulario de acceso" },
10  { patron: "/alumnos", privada: true, vista: (p, q) => "Lista de alumnos" + (q.get("orden") ? ` ordenada por ${q.get("orden")}` : "") },
11  { patron: "/alumnos/:id", privada: true, restricciones: { id: /^\d+$/ }, vista: (p, q) => `Ficha del alumno ${p.id}` + (q.get("tab") ? ` (pestaña ${q.get("tab")})` : "") },
12  { patron: "/cursos/:curso/modulos/:modulo", vista: (p) => `Módulo ${p.modulo} de ${p.curso}` },
13  { patron: "/perfil", privada: true, vista: () => `Perfil de ${sesion}` },
14  { patron: "/docs/*", vista: (p) => `Documentación: ${p.resto}` },
15];
16
17const historial = [];       // como window.history: las URL visitadas
18let actual = -1;            // posición actual en el historial
19
20/** "/alumnos/7/?tab=notas" → { ruta: "/alumnos/7", query: URLSearchParams, url: "/alumnos/7?tab=notas" } */
21function separar(url) {
22  const i = url.indexOf("?");
23  let ruta = i < 0 ? url : url.slice(0, i);
24  if (ruta.length > 1 && ruta.endsWith("/")) ruta = ruta.slice(0, -1);
25  const resto = i < 0 ? "" : url.slice(i + 1);
26  return { ruta, query: new URLSearchParams(resto), url: ruta + (resto ? "?" + resto : "") };
27}
28
29const texto = (r) => `${r.url} → ${r.vista}` + (r.desde ? ` (redirigido desde ${r.desde})` : "");
30
31/** Los parámetros si la ruta encaja con el patrón (":id" captura un segmento, "*" el resto), o null. */
32function coincidir(patron, ruta) {
33  const p = patron.split("/").filter(Boolean), r = ruta.split("/").filter(Boolean);
34  const params = {};
35  try {
36    for (let i = 0; i < p.length; i++) {
37      if (p[i] === "*") {
38        if (i >= r.length) return null;
39        params.resto = r.slice(i).map(decodeURIComponent).join("/");
40        return params;
41      }
42      if (i >= r.length) return null;
43      if (p[i].startsWith(":")) params[p[i].slice(1)] = decodeURIComponent(r[i]);
44      else if (p[i] !== r[i]) return null;
45    }
46  } catch {
47    return null;            // un %XX mal escrito: la URL no encaja con nada
48  }
49  return p.length === r.length ? params : null;
50}
51
52/** Busca la ruta, aplica las redirecciones y el guardián de las privadas y devuelve { url, vista, desde }. */
53function resolver(url) {
54  const { ruta, query, url: completa } = separar(url);
55  for (const r of RUTAS) {
56    const params = coincidir(r.patron, ruta);
57    if (!params) continue;
58    if (r.restricciones && !Object.entries(r.restricciones).every(([k, re]) => re.test(params[k]))) continue;
59    if (r.redirigir || (r.privada && !sesion)) {
60      const destino = r.redirigir ?? "/login?volver=" + encodeURIComponent(completa);
61      const res = resolver(destino);
62      return { ...res, desde: res.desde ?? completa };
63    }
64    return { url: completa, vista: r.vista(params, query) };
65  }
66  return { url: completa, vista: "Página no encontrada (404)" };
67}
68
69/** Navegar como history.pushState: se pierde lo que hubiera «adelante». */
70function ir(url) {
71  const res = resolver(url);
72  if (historial[actual] === res.url) {
73    console.log(`Ya estás en ${res.url}`);
74    return;
75  }
76  historial.splice(actual + 1);
77  historial.push(res.url);
78  actual = historial.length - 1;
79  console.log(texto(res));
80}
81
82/** Volver a mostrar la entrada actual (popstate): los guardianes se evalúan otra vez y pueden sustituirla. */
83function recargar() {
84  const res = resolver(historial[actual]);
85  historial[actual] = res.url;
86  return res;
87}
88
89function main() {
90  for (const bruta of lineas) {
91    const linea = bruta.trim();
92    if (!linea) continue;
93    const [orden, arg, ...sobra] = linea.split(/\s+/);
94    if (sobra.length) {
95      console.log(`Orden no válida: ${linea}`);
96      continue;
97    }
98    switch (orden) {
99      case "ir":
100        if (!arg || !arg.startsWith("/")) console.log(`Orden no válida: ${linea}`);
101        else ir(arg);
102        break;
103      case "atras":
104      case "adelante": {
105        const nueva = actual + (orden === "atras" ? -1 : 1);
106        if (nueva < 0 || nueva >= historial.length || actual < 0) {
107          console.log(orden === "atras" ? "No hay página anterior" : "No hay página siguiente");
108          break;
109        }
110        actual = nueva;
111        console.log(`${orden === "atras" ? "atrás" : "adelante"}: ${texto(recargar())}`);
112        break;
113      }
114      case "login": {
115        if (!arg) {
116          console.log(`Orden no válida: ${linea}`);
117          break;
118        }
119        if (sesion) {
120          console.log(`Ya hay una sesión abierta: ${sesion}`);
121          break;
122        }
123        sesion = arg;
124        console.log(`Sesión iniciada: ${sesion}`);
125        if (actual < 0) break;
126        const { ruta, query } = separar(historial[actual]);
127        if (ruta === "/login") {
128          let volver = query.get("volver") ?? "/";
129          // solo rutas propias: nada de redirecciones abiertas a otras webs
130          if (!volver.startsWith("/") || volver.startsWith("//")) volver = "/";
131          const res = resolver(volver);
132          historial[actual] = res.url;      // como router.replace: no añade entrada
133          console.log(texto(res));
134        }
135        break;
136      }
137      case "logout": {
138        if (!sesion) {
139          console.log("No hay ninguna sesión abierta");
140          break;
141        }
142        sesion = null;
143        console.log("Sesión cerrada");
144        if (actual >= 0) {
145          const antes = historial[actual];
146          const res = recargar();
147          if (res.url !== antes) console.log(texto(res));
148        }
149        break;
150      }
151      case "historial":
152        if (historial.length === 0) console.log("Historial: vacío");
153        else {
154          console.log("Historial:");
155          historial.forEach((u, i) => console.log(`${i === actual ? "*" : " "} ${i + 1}. ${u}`));
156        }
157        break;
158      default:
159        console.log(`Orden desconocida: ${orden}`);
160    }
161  }
162}
163
164main();