Keycloak json 配置文件，React 和 Router 4

Question

我正在将 React (16.3.2) 与 TypeScript (2.8.3)、Keycloak-js (3.4.3) 和 React Router 4 (4.2.2) 一起使用。这是 Keycloak 初始化：

const auth = Keycloak('./../keycloak.json');
const init = () => {
  return auth.init({ onLoad: 'login-required', checkLoginIframe: false });
};

keycloak.json 文件存储在 public 文件夹中我在 ReactDOM.render 方法之前进行 Keycloak 初始化：

import { init } from './auth';
init()
  .success((authenticated: boolean) => {
    if (authenticated) {
      ReactDOM.render(
        <Provider store={store}>
          <App />
        </Provider>,
        document.getElementById('root') as HTMLElement
      );
    } else {
      console.log('not authenticated');
    }
  })
  .error(() => {
    console.log('failed to initialize');
  });

然后是App（ThemeProvider来自styled-components）：

const App: React.SFC<Props> = ({ theme }) => {
  return (
    <BrowserRouter>
      <ThemeProvider theme={theme}>
        <Switch>
          <Redirect from="/" exact={true} to="/books" />
          <Route path="/books" component={BooksList} />
          <Route component={Error404} />
        </Switch>
      </ThemeProvider>
    </BrowserRouter>
  );
};

然后是 BooksList：

const BooksList: React.SFC<RouteComponentProps<void>> = ({ match }) => {
  return (
    <ColumnView>
      <Switch>
        <Route path={match.url} component={List} />
      </Switch>
      <Switch>
        <Route path={match.url} exact component={EmptyView} />
        <Route path={match.url + '/details/:id'} component={BookDetails} />
        <Route component={Error404} />
      </Switch>
    </ColumnView>
  );
};

当我在 URL localhost:3000 打开我的网站时，一切正常。 Keycloak 呈现一个登录页面，我可以浏览整个网站。当我想通过在浏览器中输入不同的 URL 时出现问题，例如 localhost:3000/books/details/11。 Keycloak 突然开始在一个非常不同的目录中搜索 keycloak.json 文件 - 不是 localhost:3000/keycloak.json 而是 localhost:3000/books/details/keycloak.json.

我把配置文件的本地化写成这样，问题好像不存在了：

const auth = Keycloak('./../../../keycloak.json');

'../' 的数量取决于我的路由器的嵌套程度。这解决了所有问题。

Answer 1

所以解决方案很简单 - 我不得不删除初始化前面的单个点 URL 以使路径直接而不是相对：

const auth = Keycloak('/../keycloak.json');

Keycloak json 配置文件，React 和 Router 4

Keycloak json configuration file, React and Router 4

typescript

reactjs

react-router

keycloak