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

您可以使用嵌套持久性按状态子树将存储引擎分开。

查看此 https://github.com/rt2zz/redux-persist#nested-persists

如何使用redux-persist同时保留到localStorage和sessionStorage？

1 个答案: