带有 react-router v4 和 redux 的 requireAuth

Question

我有 HOC 用于检查是否已登录用户。

import React from 'react';
import { Redirect } from 'react-router-dom';

export default function requireAuthComponent(store, Component, redirectTo = '/') {
  return class RequireAuthComponent extends React.Component {
    render() {
      const state = store.getState();
      const auth = state.auth;

      if (auth.logged) {
        return <Component {...this.props} />;
      }

      return <Redirect to={redirectTo} />;
    }
  };
}

还有路线

import PrivatContainer from './container/PrivatContainer';
import requireAuth from '../../components/requireAuth';

export default store => ({
  path: '/privat',
  exact: true,
  component: requireAuth(store, PrivatContainer),
});

私有组件

import React from 'react';

export default ({ auth: { logged }, toggleLogin }) => (
  <div>
    <h1>Privat Route</h1>
    <h3>User is {logged.toString()}</h3>
    <button onClick={() => toggleLogin()}>Logout</button>
  </div>
);

当第一次进入路由时一切正常，但是当我用logged: false 更改存储时，我仍然停留在这个组件（路由）上，因为路由调用一次并且不更新存储更新，它如何修复或订阅@ 987654326@商店更新？

Answer 1

也许它不正确，所以如果你有更好的主意，请告诉我:)

export default function requireAuthComponent(store, Component, redirectTo = '/') {
  return class RequireAuthComponent extends React.Component {
    state = {
      listener: null,
    }

    componentWillMount() {
      const listener = store.subscribe(() => {
        this.forceUpdate();
      });

      this.setState({ listener });
    }

    componentWillUnmount() {
      const { listener } = this.state;

      listener();
      this.setState({ listener: null });
    }

    render() {
      const state = store.getState();
      const auth = state.auth;

      if (auth.logged) {
        return <Component {...this.props} />;
      }

      return <Redirect to={redirectTo} />;
    }
  };
}