Javascript React.useEffect中的访问令牌通常有效，但在刷新/重新加载页面时返回时未定义

我在Gatsby中有一个简单的React页面/组件，用于进行API调用。对于这个API调用，我需要一个令牌。我使用通过他们的

AuthService

对象获取此令牌

我正在我的

useffect

中启动API调用。看起来是这样的：

 useEffect(() => {
    //defining the async function
    async function fetchFromAPI() {
      try {
        const data = await fetchData()
        setData(data)
      }
    }
    
    //executing the async function:
    fetchFromAPI()
  }, [])

函数

fetchData（）

，在

useffect

中异步调用，目前看起来如下：

async function fetchData() {
  
  const client = new GraphQLClient(SERVER_URL_GRAPHQL)
  let aToken = await AuthService.getAccessToken()
  client.setHeader('authorization', `Bearer ${aToken}`)
  const query = ...

  const data = await client.request(query)
  return data
}

所有这些通常都有效。当我从SPA中的另一个页面导航到此页面时，它会工作。但是，当我重新加载页面时，它不会。然后，访问令牌（

aToken

）返回为

未定义

但是：当我在整个调用中包装一个

setTimeout

时，我可以让事情顺利进行。然后，访问令牌返回正常，并且不是未定义的。所以我想在调用

AuthService

之前需要先初始化一些东西？我只是不知道如何确保这一点

但这不是我想在生产中做的。现在我想知道为什么会这样。也许我使用

useffect

的方式不对？不幸的是，到目前为止，我还没有在网上或github上找到任何东西。不过，我相信这个问题相当基本

编辑：可以找到

AuthService.getAccessToken（）

方法，它是

gatsby-theme-auth0

---

编辑：为了澄清，服务器确实收到了请求并发回了

{“error”：“jwt畸形”}

-这很有意义，因为它是

未定义的
我不知道是否已经在钩子中进行了身份验证，但在进行任何api调用之前，您需要检查用户是否经过身份验证，尤其是那些在app init上的。在处理身份验证时是否有钩子/上下文？如果有，您可以稍微更改代码

 const {isAuthenticated} = useContext(userAuthenticatedContext)

 useEffect(() => {
    //defining the async function
    async function fetchFromAPI() {
      try {
        const data = await fetchData()
        setData(data)
      }
    }
    
    //executing the async function:
    if(isAuthenticated) fetchFromAPI()
  }, [isAuthenticated])


通过这种方式，
isAuthenticated
是您的
useffect
中的一个依赖项，当
isAuthenticated
的值更改时，它将再次运行，并且在进行调用之前，它不会在您进行检查时失败。
我不知道您是否已经在钩子中进行了身份验证，但在进行任何api调用之前，您需要检查用户是否经过身份验证，尤其是那些在AppInit上进行的api调用。在处理身份验证时是否有钩子/上下文？如果有，您可以稍微更改代码

 const {isAuthenticated} = useContext(userAuthenticatedContext)

 useEffect(() => {
    //defining the async function
    async function fetchFromAPI() {
      try {
        const data = await fetchData()
        setData(data)
      }
    }
    
    //executing the async function:
    if(isAuthenticated) fetchFromAPI()
  }, [isAuthenticated])


这样，
isAuthenticated
是您的
useffect
中的一个依赖项，当
isAuthenticated
的值更改时，它将再次运行，并且在进行调用之前，它不会在您进行检查时失败。
getAccessToken
依赖于模块的
此.accessToken
值进行设置。在进行调用之前，似乎需要调用
handleAuthentication
或
checkSession
，以便正确初始化该值。考虑放置<代码>检查会话< /代码>当页面加载时运行的某个地方。
 <代码> GETAccoStutkEng/<代码>依赖于该模块的代码>代码。在进行调用之前，似乎需要调用
handleAuthentication
或
checkSession
，以便正确初始化该值。考虑在页面加载时运行“代码>检查会话< /代码>某个地方。是否已经验证您从服务器获得了适当的响应？只是客户端代码不起作用吗？请包括
getAccessToken
method@jack.benson只是客户端代码。当我通过SPA导航到页面时，一切正常，而当我直接重新加载页面时，一切正常。@k.s.
gatsby-theme-auth0
为我提供了getAccess方法。在这里你可以找到方法：我也可以把它包括在问题中。AFAIU，它基本上只返回一个私有变量，即访问令牌。您是否验证了当您重新加载页面时，网络请求已提交，并且收到了适当的预期响应？您是否验证了从服务器获得了适当的响应？只是客户端代码不起作用吗？请包括
getAccessToken
method@jack.benson只是客户端代码。当我通过SPA导航到页面时，一切正常，而当我直接重新加载页面时，一切正常。@k.s.
gatsby-theme-auth0
为我提供了getAccess方法。在这里你可以找到方法：我也可以把它包括在问题中。AFAIU，它基本上只返回一个私有变量，即访问令牌。您是否验证了当您重新加载页面时，网络请求已提交，并且收到了适当的预期响应？