使用 JWT Token 重新渲染组件时如何保存状态答案

【问题标题】：How to save state when re-rendering a component with JWT Token使用 JWT Token 重新渲染组件时如何保存状态
【发布时间】：2018-08-03 02:42:36
【问题描述】：

我在使用 JWT 令牌完全实现身份验证时遇到问题。我终于让我的应用程序让我在页面刷新时保持登录状态......但是，我失去了用户的其余状态。所以我的用户仍然已登录，但没有用户名或任何类型的信息。

这是我使用令牌保持用户登录的方式。

const token = localStorage.getItem('token');

if (token) {
    store.dispatch({ type: 'AUTH_USER'})
}

ReactDOM.render(
    <Provider store={store}>
        <App />
    </Provider>,
    document.getElementById('root')
);

那我的currentUser reducer就有这种情况了……

case 'AUTH_USER':
            return { ...state, loggedIn:true }

问题在于页面重新渲染状态被设置回一个空对象。我想我可以向 API 发送一个请求以再次获取用户数据......但是，必须有一种方法来保存该用户的数据？？？

【问题讨论】：

标签： reactjs authentication jwt

【解决方案1】：

我正在使用 redux-persist 使状态持久化。推荐的。然而，我在使它工作时遇到了一些困难。

如果你想使用，这是我的代码。

我正在使用 redux-persist 版本 4（版本 5 有一些重大更改，尚未迁移到它），所以如果您想使用我的代码，请使用此版本。

我也在使用 Redux DevTools、react-router 和 redux-thunk，因此代码中包含它们。

这些是我的 index.js 中的相关部分：

import React from 'react';
import ReactDOM from 'react-dom';
import { Provider } from 'react-redux';
import { BrowserRouter, Route, Switch } from 'react-router-dom';
import { compose, createStore, applyMiddleware } from 'redux';
import { persistStore, autoRehydrate } from 'redux-persist';
import ReduxThunk from 'redux-thunk';

const composeEnhancers =
  typeof window === 'object' &&
  window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ ?
    window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__({
    }) : compose;

const enhancers = composeEnhancers(
  applyMiddleware(ReduxThunk),
  autoRehydrate()
);

const initialState = {};
const store = createStore(
  reducers,
  initialState,
  compose(enhancers)
);
persistStore(store);

ReactDOM.render(
  <Provider store={store}>
    <div>
      <BrowserRouter>
        <Switch>
           <Route exact path="/xxx" component={xxx} />
           <Route path="/yyy" component={yyy} />
        </Switch>
      </BrowserRouter>
    </div>
  </Provider>
  , document.querySelector('#root'));

祝你好运！

【讨论】：