Keycloak Roles: Uncaught TypeError: Cannot read properties of undefined (reading 'roles') - React

Question

我有以下代码：

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

当 keycloak.tokenParsed.realm_access.roles 没有值时，我总是会收到错误 Uncaught TypeError: Cannot read properties of undefined (reading 'roles')。如果它有值，则不会出现错误。

我上周才开始 React.js，对 JavaScript/TypeScript 不是很熟悉，所以我发现很难实施我发现的相同问题的解决方案。

导致错误的原因是什么，我将如何解决？

Answer 1

为了防止您的代码在 keycloak.tokenParsed.realm_access 未定义时失败，您需要使用 javascript 的一项功能，称为可选链接。

这是它的工作原理。

假设您正在尝试访问对象属性（或调用对象属性），但您不确定该对象是否始终具有属性例如，您可以看到下面的代码没有 realm_access 作为嵌套 tokenParsed 对象的属性，当我们尝试访问它时它失败了。

const user = { 
  keycloak: null, 
  authenticated: false,
  tokenParsed: {
    token: '1245'
  }
}

const roles = user.tokenParsed.realm_access.roles //This would throw a TypeError

但是假设您想在属性不存在时防止此错误，这就是可选链接的用武之地

const roles = user?.tokenParsed?.realm_access?.roles

通过在属性名称和下一个属性之前的句号之间插入一个 ?，它只会 return undefined 而不是抛出丑陋的错误

Keycloak Roles: Uncaught TypeError: Cannot read properties of undefined (reading 'roles') - React

Keycloak Roles: Uncaught TypeError: Cannot read properties of undefined (reading 'roles') - React

javascript

oauth

reactjs

keycloak