Redux持续重新水化以前的身份验证状态太晚

Question

如果未经身份验证，我设置了要进行身份验证的路由，以便将用户重定向到登录页面。我还设置redux-persist以自动脱水我的身份验证状态，以便用户在刷新时保持登录状态。问题是这种补液太晚了，用户已经被重定向到登录页面

第一个位置更改是经过身份验证的路由，第二个是登录。注意在这些之后补充水分。理想情况下，它应该至少在@@ INIT之后？

Answer 1

用于使您的商店持久化的persistStore函数具有第三个参数callback，该商店在完成商店补充后调用。您必须使用某种预加载器启动您的应用程序，该预加载器等待补液发生并仅在完成后呈现您的完整应用程序。

对于此方案，

redux-persist文档甚至have a recipe。在您的情况下，所有react-router内容也应该在初始加载器中呈现：

export default class Preloader extends Component {

  constructor() {
    super()
    this.state = { rehydrated: false }
  }

  componentWillMount(){
    persistStore(this.props.store, {}, () => {
      this.setState({ rehydrated: true });
    })
  }

  render() {
    if(!this.state.rehydrated){
      return <Loader />;
    }
    return (
      <Provider store={store}>
        <ConnectedRouter history={history}>
          <App />
        </ConnectedRouter>
      </Provider>
    );
  }
}

const store = ...; // creating the store but not calling persistStore yet
ReactDOM.render(<Preloader store={store} />, ... );

Answer 2

当用户刷新页面时，第一个LOCATION_CHANGE将会触发，因为您将历史记录与商店同步。但是，它只会同步历史记录，并且不会将用户重定向到任何位置。

唯一重要的是第二个LOCATION_CHANGE，它应该在persistStore()之后发生。好消息persistStore()有回电。

const store = ...

// persist store
persistStore(store, options, () => {
  const states = store.getState();

  // if authenticated, do nothing,
  // if not, redirect to login page
  if (!states.auth.isAuthenticated) {
    // redirect to login page
  }
});

render(...);

希望这有助于解决您的问题。