Tengo el siguiente código:
class Secured extends Component { import React, { Component } from 'react'; import Keycloak from 'keycloak-js'; constructor(props) { super(props); this.state = { keycloak: null, authenticated: false, roles: [] }; } componentDidMount() { const keycloak = Keycloak('/keycloak.json'); keycloak.init({onLoad: 'login-required'}).then(authenticated => { this.setState({ keycloak: keycloak, authenticated: authenticated, roles: keycloak.tokenParsed.realm_access.roles}) }) } render() { if(this.state.keycloak) { if(this.state.authenticated) { if(this.state.roles.includes("prototype-user")){ return ( //the rest of the code here Siempre recibo un error Uncaught TypeError: Cannot read properties of undefined (reading 'roles') cuando keycloak.tokenParsed.realm_access.roles no tiene valor. Si tiene valor, no aparece el error.
Acabo de iniciar React.js la semana pasada y no estoy muy familiarizado con JavaScript/TypeScript, por lo que me resulta muy difícil implementar soluciones que encontré con el mismo problema.
¿Qué está causando el error y cómo lo solucionaré?
Para evitar que su código falle cuando keycloak.tokenParsed.realm_access no está definido, debe usar una función de javascript llamada encadenamiento opcional.
Así es como funciona esto.
Digamos que está tratando de acceder a la propiedad de un objeto (o llamar a la propiedad del objeto) pero no está seguro de que el objeto siempre tenga esa propiedad, por ejemplo, puede ver que el código a continuación no tiene realm_access como propiedad del objeto tokenParsed anidado y falla cuando intentamos acceder a él.
const user = { keycloak: null, authenticated: false, tokenParsed: { token: '1245' } } const roles = user.tokenParsed.realm_access.roles //This would throw a TypeErrorPero supongamos que desea evitar este error cuando la propiedad no está allí, ahí es donde entra en juego el encadenamiento opcional
const roles = user?.tokenParsed?.realm_access?.roles Al insertar un ? entre el nombre de la propiedad y el período anterior a la siguiente propiedad, simplemente devolverá undefined en lugar de arrojar un error feo