Reactjs 在获取用户令牌之前触发受路由器保护的路由

我有一个React应用程序，它在

componentWillMount（）

上会触发一个action creator，从存储的令牌中获取当前用户：

App.js

...
  async componentWillMount() {
    const token = localStorage.getItem("token");
    if (token) {
      await this.props.fetchUser();
    }
  }
...

...
render() {
    return (
      <Router>
        <div>
          <Reboot />
          <Route component={Header} />
          <Route exact path="/" component={Landing} />
          <ProtectedRoute
            isSignedIn={this.props.authenticated.jwtToken}
            path="/books"
            component={BookList}
          />
        </div>
      </Router>
    );
  }
...

然后，在相同的

App.js

文件中，我定义了一些路由。为简单起见，我将显示两条路线：

App.js

...
  async componentWillMount() {
    const token = localStorage.getItem("token");
    if (token) {
      await this.props.fetchUser();
    }
  }
...

...
render() {
    return (
      <Router>
        <div>
          <Reboot />
          <Route component={Header} />
          <Route exact path="/" component={Landing} />
          <ProtectedRoute
            isSignedIn={this.props.authenticated.jwtToken}
            path="/books"
            component={BookList}
          />
        </div>
      </Router>
    );
  }
...

这是

fetchUser（）

的操作创建者：

我认为通过使用

async/await

语法，我可以维护调度操作的顺序

---

有人能告诉我我做错了什么吗？理想情况下，我可以直接从浏览器进入

/books

路径，而无需单击按钮。

在

组件中调用异步操作将不会阻止它呈现，直到操作完成

在您的情况下，这与在
componentDidMount
中执行没有什么不同（这也是
componentWillMount
将在React 17中执行的原因）

在
fetchUser
完成之前，您必须决定向用户显示什么（如果连接速度慢，可能需要几秒钟）。

可能是一个旋转器？
问题是我仍然希望为客人显示一个登录页。有些组件我希望对来宾可见。当用户最初经过身份验证时，在
localStorage
中存储一个指示该组件的变量（可以只是一个布尔值，如果需要显示它，也可以是用户名）。然后将其用作标志，以确定是否应显示来宾登录页或之前已验证但挂起的数据获取页。我使用了一种稍有不同的技术，但会接受这一回答，因为它为我指明了正确的方向。