使用React-Google-login及Redux的React应用刷新后登录状态丢失如何解决

Redux 的状态仅保存在应用运行时的内存中，页面刷新后内存数据会被清空，所以你之前存在 Redux 里的登录状态和用户信息会全部丢失。你可以通过以下两种方案解决问题：

方案一：手动写入本地存储（适合轻量简单场景） #

直接在登录成功时将数据写入localStorage或者sessionStorage，Redux 初始状态优先从本地存储读取即可。

修改登录逻辑 #

// login function
const login = (response) => {
    console.log(response);
    const isSignedIn = true;
    const userData = response.profileObj;
    // 写入localStorage持久化存储
    localStorage.setItem('isSignedIn', JSON.stringify(isSignedIn));
    localStorage.setItem('userData', JSON.stringify(userData));
    dispatch(setSignedIn(isSignedIn));
    dispatch(setUserData(userData));
}

补充登出清理逻辑 #

登出时同步清除本地存储的登录数据：

const logout = () => {
    localStorage.removeItem('isSignedIn');
    localStorage.removeItem('userData');
    dispatch(setSignedIn(false));
    dispatch(setUserData(null));
}

修改Redux初始状态 #

定义鉴权相关reducer的初始状态时，优先从本地存储读取数据：

const initialAuthState = {
    isSignedIn: JSON.parse(localStorage.getItem('isSignedIn')) || false,
    userData: JSON.parse(localStorage.getItem('userData')) || null
}

方案二：使用redux-persist自动持久化（适合复杂状态场景） #

如果你的Redux状态比较复杂，手动维护存取逻辑容易出错，可以用专门的持久化库自动处理。

• 安装依赖

npm install redux-persist

• 配置Redux持久化
  修改你的store配置文件：

import { createStore } from 'redux';
import { persistStore, persistReducer } from 'redux-persist';
import storage from 'redux-persist/lib/storage'; // 默认使用localStorage
import rootReducer from './reducers';

// 持久化配置，只需要持久化鉴权相关的状态即可
const persistConfig = {
  key: 'root',
  storage,
  whitelist: ['auth'] // 数组里填你需要持久化的reducer名称，避免存储无关数据
};

const persistedReducer = persistReducer(persistConfig, rootReducer);

export const store = createStore(persistedReducer);
export const persistor = persistStore(store);

• 入口文件包裹PersistGate
  修改项目入口文件，用PersistGate包裹你的应用，确保持久化数据恢复完成后再渲染页面：

import { PersistGate } from 'redux-persist/integration/react';
import { store, persistor } from './store';

ReactDOM.createRoot(document.getElementById('root')).render(
  <Provider store={store}>
    <PersistGate loading={null} persistor={persistor}>
      <App />
    </PersistGate>
  </Provider>
);

配置完成后不需要修改原有登录、登出逻辑，redux-persist会自动同步指定的状态到本地存储，页面刷新后自动恢复数据。

注意事项 #

• 本地存储是明文存储，不要存放密码等敏感信息，你当前场景存储公开用户信息和登录状态没有问题
• Google登录令牌存在有效期，建议在应用初始化时增加令牌有效性校验逻辑，避免使用过期的无效凭证

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