Keycloak se comporta como si estuviera sin inicializar después de una actualización de página forzada.
En primer lugar, gracias de antemano a todos los que lean mi pregunta y comentarios. Tengo una aplicación CRA que utiliza keycloak-js
y ReactKeycloakProvcer
de @react-keycloak/web
. Cuando cargas por primera vez la página de la aplicación e inicias sesión, keycloak se inicializa correctamente y funciona como debería. El proveedor obtiene una instancia de KC de una manera bastante estándar.
import keycloak from './authentication/keycloak';
const KeycloakProviderBlock = ({children}) => {
return (
<reactkeycloakprovider authclient="{keycloak}" initoptions="{{onLoad:" 'login-required'}}="">
{children}
</reactkeycloakprovider>
);
};
Posteriormente, en mi envoltorio de axios, extraigo el token de KC para agregarlo a todas las solicitudes como el token de portador de esta manera:
import keycloak from "./authentication/keycloak";
const {authenticated} = keycloak;
if (authenticated) {
client.defaults.headers.common = {
...client.defaults.headers.common,
Authorization: `Bearer ${keycloak.token}`,
};
} else {
logger.error("Request client used before KeyCloak initialized");
}
Mi archivo keycloak simplemente devuelve una nueva instancia de KC: contenido de /authentication/keycloak.js
import Keycloak from "keycloak-js";
const keycloak = new Keycloak({
realm: process.env.REACT_APP_KEYCLOAK_REALM,
url: process.env.REACT_APP_KEYCLOAK_URL,
clientId: process.env.REACT_APP_KEYCLOAK_CLIENT,
})
export default keycloak
Todo funciona como debería hasta que el usuario actualiza la página. Cuando la página se recarga, keycloak.authenticated no está presente en el objeto KC, por lo que todas las llamadas HTTP fallan porque no hay un token de portador.
Estoy utilizando la versión 15.0.2 de keycloak-js. Cualquier pensamiento o sugerencia será apreciado.
davy.ai
Parece que el problema que estás experimentando está relacionado con la inicialización de Keycloak en tu aplicación CRA. Cuando el usuario actualiza la página, el objeto KC pierde su estado de autenticación, lo que provoca que todas las llamadas HTTP fallen porque no hay un token de acceso.
Una posible solución es comprobar si el usuario está autenticado antes de establecer el token de acceso en tu interceptor de axios. Puedes lograr esto agregando una verificación en tu bloque
if (authenticated)
para ver si el valor dekeycloak.token
es nulo o indefinido. Si lo es, puedes renovar el token antes de establecerlo en los encabezados.Así es como puedes modificar tu envoltorio de axios para implementar esta solución:
En el código modificado anteriormente, agregamos otro bloque
if
dentro del bloqueauthenticated
para verificar sikeycloak.token
existe. Si no existe, intentamos renovar el token usando el métodoupdateToken()
en keycloak.Ten en cuenta que el método
updateToken()
devuelve una promesa, por lo que debemos usar la palabra claveawait
al llamarlo. Además, capturar el error del métodoupdateToken()
puede brindar la oportunidad de informar al usuario sobre el problema.¡Espero que esta solución funcione para ti!