1 | export const CUE = "cue" |
1 | export const ROL_ADMINISTRADOR = "Administrador" |
2 | |
3 | // Permite que los eventos de html usen la constante. |
4 | window["ROL_ADMINISTRADOR"] = ROL_ADMINISTRADOR |
1 | export const ROL_CLIENTE = "Cliente" |
2 | |
3 | // Permite que los eventos de html usen la constante. |
4 | window["ROL_CLIENTE"] = ROL_CLIENTE |
1 | export const ROL_IDS = "rolIds" |
1 | import { CUE } from "./const/CUE.js" |
2 | import { ROL_IDS } from "./const/ROL_IDS.js" |
3 | |
4 | export class Sesion { |
5 | |
6 | /** |
7 | * @param { any } objeto |
8 | */ |
9 | constructor(objeto) { |
10 | |
11 | /** @readonly */ |
12 | this.cue = objeto[CUE] |
13 | if (typeof this.cue !== "string") |
14 | throw new Error("cue debe ser string.") |
15 | |
16 | /** @readonly */ |
17 | const rolIds = objeto[ROL_IDS] |
18 | if (!Array.isArray(rolIds)) |
19 | throw new Error("rolIds debe ser arreglo.") |
20 | /** @readonly */ |
21 | this.rolIds = new Set(rolIds) |
22 | |
23 | } |
24 | |
25 | } |
26 | |
27 | // Permite que los eventos de html usen la clase. |
28 | window["Sesion"] = Sesion |
1 | import { invocaServicio } from "../lib/js/invocaServicio.js" |
2 | import { Sesion } from "./Sesion.js" |
3 | |
4 | /** |
5 | * @param {string} servicio |
6 | * @param {string[]} [rolIdsPermitidos] |
7 | * @param {string} [urlDeProtección] |
8 | */ |
9 | export async function protege(servicio, rolIdsPermitidos, urlDeProtección) { |
10 | const respuesta = await invocaServicio('srv/srvSesion.php') |
11 | const sesion = new Sesion(respuesta.body) |
12 | if (rolIdsPermitidos === undefined) { |
13 | return sesion |
14 | } else { |
15 | const rolIds = sesion.rolIds |
16 | for (const rolId of rolIdsPermitidos) { |
17 | if (rolIds.has(rolId)) { |
18 | return sesion |
19 | } |
20 | } |
21 | if (urlDeProtección !== undefined) { |
22 | location.href = urlDeProtección |
23 | } |
24 | throw new Error("No autorizado.") |
25 | } |
26 | } |
27 | |
28 | // Permite que los eventos de html usen la función. |
29 | window["protege"] = protege |
1 | import { htmlentities } from "../../lib/js/htmlentities.js" |
2 | import { Sesion } from "../Sesion.js" |
3 | import { ROL_ADMINISTRADOR } from "../const/ROL_ADMINISTRADOR.js" |
4 | import { ROL_CLIENTE } from "../const/ROL_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_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_CLIENTE) ? |
59 | /* html */ `<li><a href="cliente.html">Para clientes</a></li>` |
60 | : "" |
61 | } |
62 | } |
63 | |
64 | customElements.define("mi-nav", MiNav) |