React登录后localStorage读取JWT token为null问题求助

核心直接错误 #

localStorage读写key不匹配：

• 登录页存储token时，使用的key是字符串常量 "my_token"，对应代码：

  window.localStorage.setItem("my_token",res.my_token);
  

• 首页读取token时，错误传入了顶部声明的未赋值变量my_token（初始值为undefined）作为getItem的参数，相当于执行localStorage.getItem(undefined)，完全匹配不到存储时的key，因此返回null。错误代码：

  my_token = window.localStorage.getItem(my_token);
  

  修正为传入正确的字符串key即可：

  const my_token = window.localStorage.getItem("my_token");
  

其他关联代码bug（不修会导致后续鉴权依然失败） #

• Authorization请求头格式错误："Bearer"和token值之间缺少半角空格，后端按空格拆分取token时会拿到undefined，修正为：

  'Authorization': `Bearer ${my_token}`,
  

• 接口响应解析缺少await：data.json()是异步方法，不加await会拿到pending状态的Promise对象，无法读取返回的用户数据和状态码，修正为：

  const res = await data.json();
  

• useEffect缺少依赖数组：当前写法没有传入第二个依赖参数，会导致组件每次重渲染都重复调用接口，触发无限渲染循环，修正为传入空数组，仅在组件首次挂载时调用鉴权接口：

  useEffect(()=>{
    callHomePage();
  }, [])
  

• 状态判断逻辑错误：!res.status===200存在运算符优先级问题，且判断顺序颠倒，应该先判断响应是否存在，再校验状态码，修正为：

  if(!res || res.status !== 200){
    const error = new Error(res.error);
    throw error;
  }
  

修正后的首页核心鉴权代码参考 #

const Home = () => {
  const [userName, setUserName] = useState("");
  const callHomePage = async() => {
    const my_token = window.localStorage.getItem("my_token");
    if (!my_token) {
      // 可在此处补充无token时跳转登录页的逻辑
      return
    }
    const data = await fetch('http://localhost:5000/getdata',{
      method:'POST',
      headers:{
        "Content-Type":"application/json",
        'Authorization': `Bearer ${my_token}`,
      },
      body:JSON.stringify({my_token})
    });
    const res = await data.json();
    if(!data.ok || !res){
      const error = new Error(res.error);
      throw error;
    }
    setUserName(res.name);
  }
  useEffect(()=>{
    callHomePage();
  }, [])
  // 其余页面渲染逻辑保持不变即可
}

内容的提问来源于stack exchange，提问作者rahul tiwari