reactjs - 如何使用 redux-persist 同时持久化到 localStorage 和 sessionStorage？

Question

我正在使用 react 实现登录表单, redux和 redux-persist .后端团队已准备好登录 API。该表单有一个“记住我”复选框，我想从登录响应中保留 JWT 身份验证 token 。

我认为实现“记住我”的正确方法是:

如果未选中“记住我”，则应将 token 持久化到sessionStorage .这样当浏览器关闭时，用户应该再次登录，但不需要在切换选项卡或刷新当前页面时登录。

如果选中，token 应该持久化到 localStorage .即使浏览器关闭，用户仍处于登录状态。

现在我从我们的后端角度知道只有 token 过期时间。

我的第一个问题是我的客户端 View 和方法是否正确。

如果是，我如何根据登录“记住我”复选框更新我的持久配置？

我的当前 store.js这是:

import { createStore } from 'redux';
import { persistStore, persistReducer } from 'redux-persist';
import storage from 'redux-persist/lib/storage'; 
import rootReducer from './reducers';

const persistConfig = {
  key: 'root',
  storage,
  whitelist: ['auth'],
};

const persistedReducer = persistReducer(persistConfig, rootReducer);

const store = createStore(persistedReducer);

const persistor = persistStore(store);

export {
  store, persistor
};

它在这里使用:

import React from 'react';
import ReactDOM from 'react-dom';
import App from 'js/containers/App';
import { store, persistor } from './store';

const render = Component => {
  ReactDOM.render(
    <Component store={store} persistor={persistor}/>,
    document.getElementById('root')
  )
};

render(App);

if (module.hot) {
  module.hot.accept('js/containers/App', () => {
    const NextApp = require('js/containers/App').default;
    render(NextApp);
  });
}

我要换 persistConfig基于登录表单并使用 sessionStorage而不是 localStorage但这就像商店结构在这里形成并且无法在应用程序中更改它。

知道如何实现这一点吗？

Answer 1

我认为您不能在创建后更改存储，但您可以在不同的存储上拥有 2 个子树。所以勾选/取消勾选“记住我”将保存在不同的树中并创建一个函数来从两个来源获取 token 。
在差异存储上创建子树看到这个
https://github.com/rt2zz/redux-persist#nested-persists
编辑
为清楚起见，添加示例。

import { combineReducers } from 'redux'
import { persistReducer } from 'redux-persist'
import storage from 'redux-persist/lib/storage'
import storageSession from 'redux-persist/lib/storage/session'

const rootPersistConfig = { key: 'root', storage, whitelist: ['cart','user'] }; 
const authPersistConfig = { key: 'user', storage:storageSession }; // This is to session storage
const rootReducer = combineReducers({ 
                user: persistReducer(authPersistConfig,userReducer), // user subtree saved in session storage
                cart: cartReducer, 
                directory: directoryReducer, 
                shop: shopReducer }); 
                
export default persistReducer(rootPersistConfig, rootReducer);