PWA 中的 keycloak-js 客户端不使用存储中的缓存令牌

Question

我想验证我的 react 应用程序 - 基于 create-react-app 和 keycloak 服务器的 PWA，一旦用户通过验证，我希望他们能够使用我缓存在 localStorage 中的有效令牌离线浏览器端但即使将令牌传递给 keycloak init，我也可以看到用户重定向到 keycloak 身份验证服务器。

库版本：-

"keycloak-js": "^12.0.2",
"@react-keycloak/web": "^3.4.0",

App.tsx

class App extends React.Component {
  tokens: any;
  constructor(props: any) {
    super(props);
    this.tokens = JSON.parse(localStorage.getItem(kcTokens) || '{}');
  }

  onTokens = (tokens: Pick<AuthClient, "idToken" | "refreshToken" | "token">) => {
    localStorage.setItem(kcTokens, JSON.stringify(tokens));
  }

  onEvent = (event: AuthClientEvent, error?: AuthClientError | undefined) => {
    console.log('onKeycloakEvent', event, error);
  }

  render() {
    return (
      <ReactKeycloakProvider
        authClient={keycloak}
        initOptions={{
          onLoad: 'check-sso',
          ...this.tokens
        }}
        LoadingComponent={loadingComponent}
        onEvent={this.onEvent}
        onTokens={this.onTokens}
      >
        <AppRouter />
      </ReactKeycloakProvider>
    )
  }
}

AppRouter.tsx

const AppRouter = () => {
    return (
        <Router history={history}>
            <Switch>
                <PrivateRoute path="/" exact component={Home}></PrivateRoute>
            </Switch>
        </Router>
    )
}

PrivateRoute.tsx

const PrivateRoute : React.FC<PrivateRouteProps> = ({ component: Component, ...rest }) => {
    const { keycloak } = useKeycloak();

    React.useEffect(() => {
        if (!keycloak?.authenticated) {
            keycloak.login();
        }
    }, [keycloak]);

    return (
        <Route
            {...rest}
            render={props => (
                keycloak?.authenticated && <Component {...props} />
            )} 
        />
    );
}