React登录系统：存储登录数据至Session Storage后无法渲染账户页面

核心问题分析 #

1. 存储介质不一致：需求是用Session Storage保存登录数据，但useToken.js中全程使用localStorage，导致读取与写入的存储位置不匹配。
2. getToken函数容错性不足：当存储中无token项时，localStorage.getItem('token')返回null，直接执行JSON.parse(null)会得到null，若存储内容为无效JSON还会抛出错误，导致token状态初始化失败。
3. Login组件缺失依赖导入：代码中使用了useState、PropTypes、axios、Link但未添加导入语句，会导致组件运行报错，无法正常执行setToken逻辑。

修复步骤 #

1. 统一存储介质为Session Storage #

修改useToken.js，替换存储对象并增加错误处理：

//useToken.js
import { useState } from 'react';

export default function useToken() {
  const getToken = () => {
    const tokenString = sessionStorage.getItem('token');
    if (!tokenString) return null;
    try {
      return JSON.parse(tokenString);
    } catch (e) {
      console.error('解析token失败:', e);
      sessionStorage.removeItem('token');
      return null;
    }
  };

  const [token, setToken] = useState(getToken());

  const saveToken = (userToken) => {
    sessionStorage.setItem('token', JSON.stringify(userToken));
    setToken(userToken);
  };
  
  return {
    setToken: saveToken,
    token,
  }
}

2. 补全Login组件的依赖导入 #

在login.js顶部添加必要导入：

//login.js
import React, { useState } from 'react';
import PropTypes from 'prop-types';
import axios from 'axios';
import { Link } from 'react-router-dom';

const Login = ({setToken}) => {
  // ... 原有代码保持不变
}

3. 验证状态更新逻辑 #

可在useToken.js的saveToken函数中添加日志，确认状态是否正确更新：

const saveToken = (userToken) => {
  sessionStorage.setItem('token', JSON.stringify(userToken));
  console.log('已更新token状态:', userToken);
  setToken(userToken);
};

额外优化建议 #

• 前端不存储敏感信息：当前代码将包含密码的完整用户对象存入Session Storage，存在安全风险，建议仅存储用户ID、邮箱等非敏感标识信息。
• 修正axios请求参数：axios.get的参数需放在params字段中，否则会被当作请求头参数传递，正确写法如下：

const { data } = await axios.get("http://localhost:3001/users", { 
  params: { email, password } 
});

内容的提问来源于stack exchange，提问作者Mina Andrawis