localStorage 需要时间在反应中存储令牌答案

【问题标题】：localStorage taking time to store token in reactlocalStorage 需要时间在反应中存储令牌
【发布时间】：2021-11-15 21:51:49
【问题描述】：

我正在尝试将 JWT 令牌存储到 localStorage。它可以正确存储而没有问题。但是，当我将 localStorage 中的令牌作为 API 中的 Authorization 标头结束时，它会变为空。但是当我重新加载页面时，我从数据库中得到了正确的响应。代码如下：

Home.js

useEffect(() => {
const queryParams = new URLSearchParams(window.location.search);
setToken(queryParams.get("token"))
localStorage.setItem('token', token)

setRedirect(true)
}, []);

if (redirect) {
    return (
      <Redirect
        to={{
          pathname: "/chatroom",
          state: { token.id },
        }}
      />
    );
  }
return "";

Apihelper.js

const token = localStorage.getItem("token");

const headers = {
  Authorization: `Bearer ${token}`,
};

export const initiateChat = async (data) =>
  await axios.post(`${API}/room/initiate`, data, {
    headers,
 });

Chatroom.js

import { initiateChat } from "../Apihelper";

const Chatroom = (props) => {

useEffect(() => {
    setLoading(true);
    initiateChat(user, props.location.state).then(({data}) => setUsers(data))
}, []);

}

当我点击这个initiateChat API 时，我得到 401，即 Invalid Token。但是当我重新加载页面时，我得到了预期的响应。我认为是它第一次访问 API 时，发现 localStorage 中没有令牌，因为它可能在 localStorage 中有任何数据之前就被调用了。但是当我重新加载它时，我得到了正确的响应，因为现在 localStorage 中有一个令牌。

我怎样才能等到它不在 localStorage 中存储令牌？？

【问题讨论】：

Home.js 中，useEffect 中的前 3 行：按照你的说法，他们应该做什么？他们什么时候被处决？在initiateChat 之前还是之后？想想……
Home.js 为入口页面。我正在尝试从 url 获取 jwt 令牌并将其保存在 localStorage 中以使用授权标头进行 API 调用。

标签： reactjs jwt

【解决方案1】：

您需要添加token 作为useEffect 调用的依赖项：

useEffect(() => {
   const queryParams = new URLSearchParams(window.location.search);
   setToken(queryParams.get("token"))
   localStorage.setItem('token', token)

   setRedirect(true)
}, [token]);

【讨论】：