Authentication APIPplatform-react admin:localstorage中的令牌重定向时为空，必须刷新页面

我正在使用堆栈平台和react admin。 我的JWT身份验证在Api平台上运行良好

我试着在后台使用它。 我遵循了这些文件：

身份验证/授权有效，但登录成功后，我被重定向到后台，并且我出现了服务器通信错误，因为发送到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>
);

从“React”导入React；
从“@api platform/admin”导入{hydradmin，ResourceGuesser}；
从“/components/authProvider”导入authProvider；
从“@api platform/api doc parser/lib/hydra/parseHydraDocumentation”导入parseHydraDocumentation；
进口{
dataProvider作为baseDataProvider，
fetchHydra作为baseFetchHydra
}来自“@api平台/管理员”；
从“react router dom”导入{Redirect}；
常量入口点=”http://localhost:8089/api";
常量fetchHeaders={
授权：`Bearer${window.localStorage.getItem（“令牌”）}`
};
const fetchHydra=（url，options={}）=>
baseFetchHydra（url{
…选项，
标题：新标题（fetchHeaders）
});
const apiDocumentationParser=entrypoint=>
解析文档（入口点{
标题：新标题（fetchHeaders）
}).那么(
（{api}）=>（{api}），
结果=>{
开关（结果状态）{
案例401：
还愿({
api:result.api，
海关路线：[
{
道具：{
路径：“/”，
渲染：（）=>
}
}
]
});
违约：
返回承诺。拒绝（结果）；
}
}
);
const dataProvider=baseDataProvider(
入口点，
水螅，
ApicDocumentationParser
);
导出默认值（）=>(
);

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();
};

从“react admin”导入{AUTH_LOGIN，AUTH_LOGOUT，AUTH_CHECK，AUTH_ERROR}；
导出默认值（类型、参数）=>{
如果（类型===AUTH\u登录）{
const{email，password}=params；
const request=新请求（“http://localhost:8089/api/login_check", {
方法：“张贴”，
正文：JSON.stringify（{email，password}），
标题：新标题（{“内容类型”：“应用程序/json”}）
});
返回获取（请求）
。然后（响应=>{
如果（response.status<200 | | response.status>=300）{
抛出新错误（response.statusText）；
}
返回response.json（）；
})
。然后（{token}）=>{
setItem（“token”，token）；
});
}
如果（类型===AUTH\u注销）{
localStorage.removietem（“令牌”）；
返回承诺。解决（）；
}
如果（类型===验证错误）{
console.log（“AUTH_错误”）；
//localStorage.removietem（“令牌”）；
返回承诺。解决（）；
}
如果（类型===验证检查）{
返回localStorage.getItem（“令牌”）
承诺，决心
：Promise.reject（{重定向到：“/login”}）；
}
返回承诺。解决（）；
};

我不知道这是否是正确的解决方案，因为和你一样，我也没有发现关于这个问题的任何信息

但对我来说，如果我只调用

window.location.reload（）在
localStorage.setItem（'token'，token）之后
它为我解决了这个问题，因为在登录后，它会重新加载admin，并且在那一刻，它可以识别令牌。也许这不是最干净的解决方案，但效果很好

顺便说一句，我认为，这不是与HydraAdmin组件相关的问题，我尝试了经典的React Admin组件，问题仍然存在，因此它与React Admin相关。
这是如何解决的？不是，我没有找到任何解决方案，也没有人回答我。我认为HydraAdmin组件有问题，但我不确定。