为什么keycloak在页面刷新时会被授权？

Question

我现在已经成功地将keycloak与reactJS集成，当我刷新页面keycloak.authenticate时，它会再次询问凭据。 我也在互联网上搜索过，他们建议在 initOptions 属性中传递令牌和刷新令牌，我已经这样做了，但仍然面临同样的问题。

我正在使用“@react-keycloak/web”：“^2.1.1”和“keycloak-js”：“^10.0.1”

这是我的 Keycloak.js 代码

---

import * as Keycloak from 'keycloak-js';

const keycloakConfig = {
   url: 'https://smartgrid.doersops.com/auth/',
   realm: 'OneSmartgrid',
   clientId: 'smartgrid-react-web-admin',
}

const keycloak = new Keycloak(keycloakConfig);

export default keycloak

---

这是我的 App.js 代码

import React from 'react';
import { KeycloakProvider } from '@react-keycloak/web'
import keycloak from './keycloak';
import { AppRouter }  from './routes';
function App() {
  const token = localStorage.getItem('token');
  const refreshToken = localStorage.getItem('refreshToken');

  const setTokens = (token, idToken, refreshToken) => {
    localStorage.setItem('token', token);
    localStorage.setItem('refreshToken', refreshToken);
    localStorage.setItem('idToken', idToken);
  }
  return (
    <KeycloakProvider 
      keycloak={keycloak}
      onTokens={
          (tokens:  keycloakTokens) => 
          setTokens(tokens.token ?? '', tokens.idToken ?? '', tokens.refreshToken ?? '')
        }
      initOptions={{ onLoad: 'login-required', token, refreshToken }}
      >
      <AppRouter />
    </KeycloakProvider>
  )
}

export default App;

Answer 1

我正在回答我自己的问题，实际上我必须从 keycloak 管理面板更改设置。单击侧面菜单中的身份验证，然后从下拉列表中选择浏览器。

Answer 2

按照 KC 管理面板上的提示，将 Cookie 的要求（浏览器身份验证流程）标记为“替代”解决了我的问题。

Answer 3

在我的例子中，我必须添加等待 0.75 秒，然后再次检查

keycloak.authenticated

标志，它起作用了。看起来 keycloak 无法足够快地重新加载页面后检查身份验证。

下面的伪代码（它是一个 vue 路由器）：

if (routeIsProtected && !keycloak.authenticated) {
    await wait(750); // here
    if (keycloak.authenticated)
      next();
    else
      next({ name: 'home' });
  } else {
    next();
  };