apiapiform-react admin：本地存储令牌在重定向时为null，必须刷新页面

Question

我正在使用堆栈apiplatform并回应管理员。我的JWT身份验证可以在apiplatform上正常工作。

我尝试在我的react admin后台使用它。我遵循了这些文档：

• https://api-platform.com/docs/admin/authentication-support/
• https://marmelab.com/react-admin/doc/2.9/Authentication.html

身份验证/授权有效，但是登录成功后，我被重定向到后台，并且由于发送到api的令牌为空，因此发生服务器通信错误。

我在本地存储中看到它，并且如果刷新页面，则一切正常。

就像在存储令牌之前成功重定向一样。

这是我的代码：

App.js

import React from "react";
import { HydraAdmin, ResourceGuesser } from "@api-platform/admin";
import authProvider from "./components/authProvider";
import parseHydraDocumentation from "@api-platform/api-doc-parser/lib/hydra/parseHydraDocumentation";
import {
  dataProvider as baseDataProvider,
  fetchHydra as baseFetchHydra
} from "@api-platform/admin";
import { Redirect } from "react-router-dom";

const entrypoint = "http://localhost:8089/api";
const fetchHeaders = {
  Authorization: `Bearer ${window.localStorage.getItem("token")}`
};
const fetchHydra = (url, options = {}) =>
  baseFetchHydra(url, {
    ...options,
    headers: new Headers(fetchHeaders)
  });
const apiDocumentationParser = entrypoint =>
  parseHydraDocumentation(entrypoint, {
    headers: new Headers(fetchHeaders)
  }).then(
    ({ api }) => ({ api }),
    result => {
      switch (result.status) {
        case 401:
          return Promise.resolve({
            api: result.api,
            customRoutes: [
              {
                props: {
                  path: "/",
                  render: () => <Redirect to={`/login`} />
                }
              }
            ]
          });

        default:
          return Promise.reject(result);
      }
    }
  );
const dataProvider = baseDataProvider(
  entrypoint,
  fetchHydra,
  apiDocumentationParser
);

export default () => (
  <HydraAdmin
    apiDocumentationParser={apiDocumentationParser}
    dataProvider={dataProvider}
    authProvider={authProvider}
    entrypoint={entrypoint}
  >
    <ResourceGuesser name="resource" />
  </HydraAdmin>
);

authProvider.js

import { AUTH_LOGIN, AUTH_LOGOUT, AUTH_CHECK, AUTH_ERROR } from "react-admin";

export default (type, params) => {
  if (type === AUTH_LOGIN) {
    const { email, password } = params;
    const request = new Request("http://localhost:8089/api/login_check", {
      method: "POST",
      body: JSON.stringify({ email, password }),
      headers: new Headers({ "Content-Type": "application/json" })
    });
    return fetch(request)
      .then(response => {
        if (response.status < 200 || response.status >= 300) {
          throw new Error(response.statusText);
        }
        return response.json();
      })
      .then(({ token }) => {
        localStorage.setItem("token", token);
      });
  }
  if (type === AUTH_LOGOUT) {
    localStorage.removeItem("token");
    return Promise.resolve();
  }
  if (type === AUTH_ERROR) {
    console.log("AUTH_ERROR");
    //localStorage.removeItem("token");
    return Promise.resolve();
  }
  if (type === AUTH_CHECK) {
    return localStorage.getItem("token")
      ? Promise.resolve()
      : Promise.reject({ redirectTo: "/login" });
  }
  return Promise.resolve();
};

Answer 1

我不知道这是否是正确的解决方案，因为像您一样，我对此一无所获。

但是对我来说，如果我仅在window.location.reload();之后调用localStorage.setItem('token', token);，它将为我解决问题，因为登录后，它将重新加载admin，并且此时可以识别令牌。也许这不是有史以来最干净的解决方案，但是效果很好。

顺便说一句，我认为这不是与HydraAdmin组件有关的问题，我尝试了经典的React Admin组件，但该问题仍然存在，因此与React Admin有关。