Redux状态不持久：忘记密码流程中无法获取存储的用户邮箱

你遇到的问题核心原因很明确：Redux Store的状态是存储在浏览器内存中的。当用户点击邮件里的链接打开新标签页（或者刷新页面）时，整个React应用会重新初始化，Redux的状态会被重置为初始值（也就是你的AuthReducer里的{isAuth:false}），所以之前存入的email自然就丢失了——这就是为什么你能读取到store里的其他状态（那些状态可能是页面初始化后重新获取的，或者有持久化逻辑），但唯独邮箱拿不到。

下面给你两种可行的解决方案，按推荐优先级排序：

方案一：通过重置链接的Token传递邮箱（推荐，更安全） #

这种方式不需要依赖Redux的内存状态，而是把邮箱信息编码到重置链接的Token中，前端通过解析Token获取邮箱，完全避免页面刷新/新标签页导致的状态丢失问题。

修改步骤： #

1. 后端修改Token生成逻辑（在你处理/forgetEmail/的接口里）：
   生成JWT Token时，把用户邮箱作为Payload的一部分加进去，同时设置合理的过期时间（比如1小时）：

   // 示例：/forgetEmail/接口的后端代码
   Router.post('/forgetEmail/', (req, res) => {
     const { email } = req.body;
     // 生成包含邮箱的Token，设置过期时间
     const token = jwt.sign({ email }, "aseceratetoken", { expiresIn: '1h' });
     // 发送邮件，把Token拼到重置链接中，比如：`http://你的后端地址/passWordForget/${token}`
     // ...你的邮件发送逻辑
     res.status(200).send({ message: '重置邮件已发送' });
   });
   

2. 前端新密码页面解析Token获取邮箱：
   从后端设置的Cookie（vstring）中取出Token，解码后拿到邮箱，不需要依赖Redux：

   import jwt from 'jsonwebtoken';
   
   class NewPass extends React.Component {
     constructor(props){
       super(props)
       let email = '';
       try {
         // 从Cookie中取出后端设置的vstring（Token）
         const token = document.cookie.split('; ')
           .find(row => row.startsWith('vstring='))?.split('=')[1];
         if (!token) throw new Error('Token不存在');
         // 解码Token获取邮箱
         const decoded = jwt.verify(token, "aseceratetoken");
         email = decoded.email;
       } catch (err) {
         // Token无效/过期，跳回首页
         window.location.href = '/';
       }
   
       this.state = {
         email: email,
         password:'',
         passwordVerify:''
       }
       this.handleChange = this.handleChange.bind(this)
       this.handleSubmit = this.handleSubmit.bind(this)
     }
   
     // ...你的handleChange和handleSubmit逻辑
   }
   
   // 不需要从Redux取邮箱，直接导出组件
   export default connect()(NewPass )
   

方案二：持久化Redux状态（适合临时场景，有安全风险） #

如果你坚持要通过Redux存储邮箱，可以使用redux-persist将Redux状态持久化到localStorage或sessionStorage中，这样页面刷新/新标签页打开后，状态依然能保留。

修改步骤： #

1. 安装redux-persist：

   npm install redux-persist
   

2. 修改Redux Store配置：

   // 你的store配置文件（比如store.js）
   import { createStore } from 'redux';
   import { persistStore, persistReducer } from 'redux-persist';
   import storage from 'redux-persist/lib/storage'; // 默认使用localStorage
   import rootReducer from './rootReducer';
   
   // 持久化配置
   const persistConfig = {
     key: 'root',
     storage,
     whitelist: ['Auth'] // 只持久化Auth reducer的状态
   };
   
   // 创建持久化的Reducer
   const persistedReducer = persistReducer(persistConfig, rootReducer);
   
   // 创建Store和Persistor
   export const store = createStore(persistedReducer);
   export const persistor = persistStore(store);
   

3. 在App入口包裹PersistGate：

   // index.js
   import { Provider } from 'react-redux';
   import { PersistGate } from 'redux-persist/integration/react';
   import { store, persistor } from './store';
   
   ReactDOM.render(
     <Provider store={store}>
       <PersistGate loading={null} persistor={persistor}>
         <App />
       </PersistGate>
     </Provider>,
     document.getElementById('root')
   );
   

⚠️ 注意：这种方式会把邮箱存在localStorage中，有被XSS攻击窃取的风险，所以不推荐用于生产环境，更适合快速测试场景。

为什么之前的代码不行？ #

你的AuthReducer初始状态是{isAuth:false}，当新页面打开时，Redux重新初始化，state.Auth回到这个初始值，没有email属性，所以this.props.user.email自然是undefined。而你提到的“其他状态可以正常读取”，大概率是那些状态在页面初始化时通过接口重新获取了，或者已经有持久化逻辑，所以能被读到。

内容的提问来源于stack exchange，提问作者Rajan Lagah