1	export const CUE = "cue"

B. js / protege.js


1	import { consumeJson } from "../lib/js/consumeJson.js"
2	import { exportaAHtml } from "../lib/js/exportaAHtml.js"
3	import { Sesion } from "./Sesion.js"
4
5	/**
6	* @param {string} servicio
7	* @param {string[]} [rolIdsPermitidos]
8	* @param {string} [urlDeProtección]
9	*/
10	export async function protege(servicio, rolIdsPermitidos, urlDeProtección) {
11	const respuesta = await consumeJson(servicio)
12	const sesion = new Sesion(respuesta.body)
13	if (rolIdsPermitidos === undefined) {
14	return sesion
15	} else {
16	const rolIds = sesion.rolIds
17	for (const rolId of rolIdsPermitidos) {
18	if (rolIds.has(rolId)) {
19	return sesion
20	}
21	}
22	if (urlDeProtección !== undefined) {
23	location.href = urlDeProtección
24	}
25	throw new Error("No autorizado.")
26	}
27	}
28
29	exportaAHtml(protege)

1	export const ROL_IDS = "rolIds"

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

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

F. js / Sesion.js


1	import { exportaAHtml } from "../lib/js/exportaAHtml.js"
2	import { CUE } from "./CUE.js"
3	import { ROL_IDS } from "./ROL_IDS.js"
4
5	export 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
34	exportaAHtml(Sesion)


1	import { htmlentities } from "../../lib/js/htmlentities.js"
2	import { Sesion } from "../Sesion.js"
3	import { ROL_ID_ADMINISTRADOR } from "../ROL_ID_ADMINISTRADOR.js"
4	import { ROL_ID_CLIENTE } from "../ROL_ID_CLIENTE.js"
5
6	export 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
64	customElements.define("mi-nav", MiNav)