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

Posted 2023-03-10

【中文标题】localStorage 需要时间在反应中存储令牌

【英文标题】：localStorage taking time to store token in react

【发布时间】：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 调用。

【参考方案1】：

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

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

   setRedirect(true)
, [token]);