L. Carpeta « js »

Versión para imprimir.

A. js / CUE.js

1export const CUE = "cue"

B. js / protege.js

1import { consumeJson } from "../lib/js/consumeJson.js"
2import { exportaAHtml } from "../lib/js/exportaAHtml.js"
3import { muestraError } from "../lib/js/muestraError.js"
4import { MiNav } from "./custom/mi-nav.js"
5import { Sesion } from "./Sesion.js"
6
7const SERVICIO = 'srv/sesion-actual.php'
8const URL_DE_PROTECCION = 'index.html'
9
10/**
11 * @param {MiNav} [nav]
12 * @param {string[]} [rolIdsPermitidos]
13 */
14export async function protege(nav, rolIdsPermitidos) {
15 try {
16
17 const respuesta = await consumeJson(SERVICIO)
18 const sesion = new Sesion(respuesta.body)
19
20 if (nav) {
21 nav.sesion = sesion
22 }
23
24 if (rolIdsPermitidos === undefined) {
25
26 return sesion
27
28 } else {
29
30 const rolIds = sesion.rolIds
31
32 for (const rolId of rolIdsPermitidos) {
33 if (rolIds.has(rolId)) {
34 return sesion
35 }
36 }
37
38 if (location.href !== URL_DE_PROTECCION) {
39 location.href = URL_DE_PROTECCION
40 }
41
42 throw new Error("No autorizado.")
43
44 }
45
46 } catch (error) {
47 muestraError(error)
48 }
49}
50
51exportaAHtml(protege)

C. js / ROL_IDS.js

1export const ROL_IDS = "rolIds"

D. js / ROL_ID_ADMINISTRADOR.js

1export const ROL_ID_ADMINISTRADOR = "Administrador"
2
3// Permite que los eventos de html usen la constante.
4window["ROL_ID_ADMINISTRADOR"] = ROL_ID_ADMINISTRADOR

E. js / ROL_ID_CLIENTE.js

1export const ROL_ID_CLIENTE = "Cliente"
2
3// Permite que los eventos de html usen la constante.
4window["ROL_ID_CLIENTE"] = ROL_ID_CLIENTE

F. js / Sesion.js

1import { exportaAHtml } from "../lib/js/exportaAHtml.js"
2import { CUE } from "./CUE.js"
3import { ROL_IDS } from "./ROL_IDS.js"
4
5export class Sesion {
6
7 /**
8 * @param { any } objeto
9 */
10 constructor(objeto) {
11
12 /**
13 * @readonly
14 */
15 this.cue = objeto[CUE]
16 if (typeof this.cue !== "string")
17 throw new Error("cue debe ser string.")
18
19 /**
20 * @readonly
21 */
22 const rolIds = objeto[ROL_IDS]
23 if (!Array.isArray(rolIds))
24 throw new Error("rolIds debe ser arreglo.")
25 /**
26 * @readonly
27 */
28 this.rolIds = new Set(rolIds)
29
30 }
31
32}
33
34exportaAHtml(Sesion)

G. Carpeta « js / custom »

Versión para imprimir.

1. js / custom / mi-nav.js

1import { htmlentities } from "../../lib/js/htmlentities.js"
2import { Sesion } from "../Sesion.js"
3import { ROL_ID_ADMINISTRADOR } from "../ROL_ID_ADMINISTRADOR.js"
4import { ROL_ID_CLIENTE } from "../ROL_ID_CLIENTE.js"
5
6export class MiNav extends HTMLElement {
7
8 connectedCallback() {
9
10 this.style.display = "block"
11
12 this.innerHTML = /* html */
13 `<nav>
14 <ul style="display: flex;
15 flex-wrap: wrap;
16 padding:0;
17 gap: 0.5em;
18 list-style-type: none">
19 <li><progress max="100">Cargando…</progress></li>
20 </ul>
21 </nav>`
22
23 }
24
25 /**
26 * @param {Sesion} sesion
27 */
28 set sesion(sesion) {
29 const cue = sesion.cue
30 const rolIds = sesion.rolIds
31 let innerHTML = /* html */ `<li><a href="index.html">Inicio</a></li>`
32 innerHTML += this.hipervinculosAdmin(rolIds)
33 innerHTML += this.hipervinculosCliente(rolIds)
34 const cueHtml = htmlentities(cue)
35 if (cue !== "") {
36 innerHTML += /* html */ `<li>${cueHtml}</li>`
37 }
38 innerHTML += /* html */ `<li><a href="perfil.html">Perfil</a></li>`
39 const ul = this.querySelector("ul")
40 if (ul !== null) {
41 ul.innerHTML = innerHTML
42 }
43 }
44
45 /**
46 * @param {Set<string>} rolIds
47 */
48 hipervinculosAdmin(rolIds) {
49 return rolIds.has(ROL_ID_ADMINISTRADOR) ?
50 /* html */ `<li><a href="admin.html">Para administradores</a></li>`
51 : ""
52 }
53
54 /**
55 * @param {Set<string>} rolIds
56 */
57 hipervinculosCliente(rolIds) {
58 return rolIds.has(ROL_ID_CLIENTE) ?
59 /* html */ `<li><a href="cliente.html">Para clientes</a></li>`
60 : ""
61 }
62}
63
64customElements.define("mi-nav", MiNav)