Question

我有一个react-router-dom和redux。我的情况很简单： 1）如果用户没有令牌重定向到登录 2）否则转到仪表板。问题是令牌的redux检查（在本地存储中）稍后到达，因此无论我做什么我都重定向到login。这是我的

代码：

const AsyncAuth = asyncComponent(() => import('containers/Auth/Auth'));
const AsyncDashboard = asyncComponent(() => import('containers/Dashboard/Dashboard'));
interface IProps {
  autoSignIn: () => void;
  isAuthenticated: boolean;
}
class App extends React.Component<IProps, {}> {

  public componentDidMount() {
    this.props.autoSignIn();
  }

  public render() {
    return (
      <div>
        <Switch>
          <Route path="/auth" component={AsyncAuth} />
          {this.props.isAuthenticated && <Route path="/dashboard" component={AsyncDashboard} />}
          <Redirect to="/auth" />
        </Switch>
      </div>
    );
  }
}

const mapStateToProps = (state: any) => ({
  isAuthenticated: state.auth.idToken !== null
});

const mapDispatchToProps = (dispatch: any) => ({
  autoSignIn: () => dispatch(authAutoSignIn())
});

export default connect(mapStateToProps, mapDispatchToProps)(App);

Answer 1

您没有发布Redux代码，但我假设您的autoSignIn操作创建者执行了异步操作。您可以做的是在state.auth的化简器中保持triedAutoLogin: false之类的状态。

只要您的异步登录操作解决（成功/失败），您都可以更新triedAutoLogin: true。然后将其包含在mapStateToProps中，并根据两者有条件地渲染<Route /> and <Redirect />组件。

Answer 2

使用redux-thunk（和Flux标准动作）时，常见的模式是拥有requestStatus属性。

通常用于HTTP请求，您将拥有NotStarted，“已启动”，“成功”和“失败”。

您可以对Redux应用类似的样式。

您可以拥有一个authCheckStatus属性，该属性具有相同的值。

在组件中，当authCheckStatus不是Success时，无需渲染路由器，而是渲染其他内容（如果检查足够快，则什么也没有。）

这将与idToken本身分开。

反应路由器的竞争状况

2 个答案: