React登录用户信息浏览器缓存异常问题求助

看起来你的问题核心是Redux store的用户状态没有及时更新，以及状态更新的时机不对，下面分点给出具体的修复步骤：

一、解决登出后切换用户首页不更新的问题 #

你当前的requestUserInfo只在configureStore初始化时执行了一次，登出后store里的旧用户信息并没有被清除，换用户登录后也没有重新触发状态更新，所以组件还在渲染旧数据。

修复步骤： #

1. 登出时主动清空store中的用户状态
   在你的登出函数中，除了删除localStorage.usertoken，还要dispatch action把store里的用户信息重置为空：

   const handleLogout = () => {
     localStorage.removeItem('usertoken');
     // 重置store中的用户信息
     dispatch({ type: USER_INFO, payload: {"username": "","picture": "","activity": 0} });
     // 跳转到登录页
     history.push('/login');
   };
   

2. 登录成功后直接更新store
   不要依赖configureStore初始化时的requestUserInfo，在登录接口返回token后，立即解码并把用户信息dispatch到store：

   // 假设这是登录成功后的处理逻辑
   const handleLoginSuccess = (token) => {
     localStorage.setItem('usertoken', token);
     const decoded = jwt_decode(token);
     const userInfo = {
       "username": `${decoded.first_name} ${decoded.last_name}`,
       "picture": "assets/img/avatars/test.png",
       "activity": 1
     };
     // 直接更新store
     dispatch({ type: USER_INFO, payload: userInfo });
     // 跳转首页
     history.push('/');
   };
   

二、解决隐私标签页首次登录变量为空的问题 #

这个问题是因为store初始化时的requestUserInfo在token存入localStorage之前执行了，导致读取不到token，返回了空的用户信息，而登录后没有及时更新store。

修复步骤： #

1. 在PrivateRoute对应的组件中重新触发用户信息获取
   在Layout组件（也就是PrivateRoute的component）的useEffect中，每次组件挂载时都调用requestUserInfo，确保能获取到最新的localStorage状态：

   import { useEffect } from 'react';
   import { useDispatch, useSelector } from 'react-redux';
   import { requestUserInfo } from '../path-to-your-action-file';
   
   const Layout = () => {
     const dispatch = useDispatch();
     const userInfo = useSelector(state => state.userInfo); // 对应你的store中用户信息的路径
   
     useEffect(() => {
       // 组件挂载时重新获取用户信息
       dispatch(requestUserInfo());
     }, [dispatch]);
   
     return (
       <div>Hello {userInfo.username}</div>
     );
   };
   

2. 验证isLogged函数的可靠性
   你的isLogged函数在解码token时没有验证token是否过期，建议加上过期时间的校验，避免无效token导致的状态错误：

   export default function isLogged() {
     let status = false;
     if(localStorage.usertoken){
       try{
         const decoded = jwt_decode(localStorage.usertoken);
         // 检查token是否过期（假设你的token里有exp字段）
         const currentTime = Date.now() / 1000;
         if(decoded.exp > currentTime){
           status = true;
         }
       } catch(e){
         console.log(e);
         // 解码失败，说明token无效，直接删除
         localStorage.removeItem('usertoken');
       }
     }
     return status;
   }
   

三、额外检查点 #

• 确保你的组件是通过useSelector（hooks）或者connect（类组件）来获取store中的用户信息，而不是只在组件初始化时读取一次本地变量。
• 检查PrivateRoute的实现，确保每次路由切换时都会重新验证登录状态，并且组件会重新渲染。

通过以上修改，就能解决你遇到的两个问题：登出换用户后首页会立即更新显示新用户名，隐私标签页首次登录也能正确获取到用户信息。

内容的提问来源于stack exchange，提问作者Morgan Senechal