Question

我在使用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以再次获取用户数据...但是，必须有一种方法来保存该用户的数据???

Answer 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'));

祝你好运！

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

1 个答案: