Блог

Я пытаюсь создать приложение для входа в систему, которое передает JWT в заголовках другого приложения.

Я запустил с этого приложения аутентификацию пользователя keycloak 2, адаптированную к моей установке Kecloak, и она работает нормально. Теперь мне нужно создать компонент, который вызывает внешний URL-адрес, передавая токен авторизации

В этом компоненте

 import React, { Component } from 'react';

class callUrl1 extends Component {

  constructor(props) {
    super(props);
    this.state = { response: null };
  }

  authorizationHeader() {
    if(!this.props.keycloak) return {};
    return {
      headers: {
        "Authorization": "Bearer "   this.props.keycloak.token
      }
    };
  }

  handleClick = () => {
    console.log("callUrl1 called")
  }

}

export default callUrl1;
  

Мне нужно что-то, что вызывает внешний URL-адрес; что-то вроде:

 SOME_FUNCTION('https://www.h.net/users', this.authorizationHeader())
  

чтобы поместить внутри handleClick.

Все, что я пробовал, выдает ошибки компиляции.

Как я могу перейти от «http://localhost:3000 » чтобы «https://www.h.net/users » прохождение JWT?

Встроенная библиотека для выполнения запросов во интерфейсном JS называется Fetch . Вот пример того, как вы могли бы это сделать в вашем случае:

 handleClick = () => {
  fetch('https://www.h.net/users', this.authorizationHeader())
    .then((response) => {
       // do something with the response here...
    });
}
  

или с помощью async / await:

 handleClick = async () => {
  const response = await fetch('https://www.h.net/users', this.authorizationHeader());
  // do something with response like:
  const data = await response.json();
}
  

Для получения дополнительной информации о выборке ознакомьтесь с mdn: https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API/Using_Fetch