无法将 access_token 传递给 Reactjs 中的端点

Posted 2023-02-27

【中文标题】无法将 access_token 传递给 Reactjs 中的端点

【英文标题】：Unable to pass access_token to endpoint in Reactjs

【发布时间】：2021-04-01 23:27:48

【问题描述】：

我正在尝试从需要access_token 的 API 获取数据。还有另一个用于获取 access_token 的 API。因此，我首先尝试获取 access_token，然后将其传递给返回数据的 API。

我观察到令牌 API 被命中，但当它被传递到数据 API 时，令牌是 undefined

请建议如何先获取access_token，然后将其传递给data_api。

【问题讨论】：

您能否告诉我您需要对所有 API 使用相同的逻辑，或者如果您需要传入所有 API，则只需要一个 API，这样您就可以在每次调用 API 之前为调用创建自定义挂钩。跨度>

@sedhalsoni 你的意思是我必须在每个 api 调用和单独的钩子之前编写一个单独的提取？

是的，如果您需要每次都获取访问令牌，或者第二种选择是在初始级别获取访问令牌并将其设置在本地存储中并在每个 API 调用中传递。

@sedhalsoni 我已经尝试过你的方法，现在令牌和 api_headers 正在控制台中打印，但得到了401 error，所以我在Network 下签入response headers，观察到@987654330 @ 并因此得到401unauthorized error。这是代码slack-files.com/T04MYU6C6-F01J7LJH6KA-7e54b04fa6。您能否建议对此进行修复，因为这可能是获得最终结果的最后一步。谢谢！

【参考方案1】：

const useFetch = (url,headers)=>

    const [status, setStatus] = useState('idle');
    const [data, setData] = useState([]);
    const [loading, setLoading] = useState(true)
    useEffect(() => 
        
        const fetchData = async () => 
            setStatus('fetching');
            const response = await fetch(
                url,headers
            );
            const data = await response.json();
            setData(data)
            setLoading(false)
            setStatus('fetched');
        ;
    
        fetchData();
    , [url,headers,setStatus,setData,setLoading]);
    return  data,loading 

【讨论】：

嘿，我试过这段代码。但令牌仍然未定义。不知道哪里出了问题:(

我的错，我想我也必须使用status 来检查它是否空闲？

你能帮帮我吗，我有点困惑

是的，我只尝试过这个，但将token 设为undefined

您已经使用了两次 useFetch。并且当第一个useFetch答案还没有到达时，不能使用api_headers