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

Question

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

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

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

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

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

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

我的电流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 个子树。因此，勾选/取消勾选“记住我”将保存在不同的树中，并创建一个函数从两个来源获取令牌。

要在差异存储上创建子树，请参阅此 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);