我可以在哪里将自动身份验证代码放在ReactJS中？

Question

我正在使用ReactJS，redux和react-router。我正在使用localStorage自动登录用户。我的App.js看起来像这样：

`      <Router>
          <Provider store={store}>
            <div className="App">
              <Route path="/" component={NavBar} />
              <Route exact path="/" component={Home} />
              <Route exact path="/list" component={RoadmapList} />
              <Route path="/roadmap" component={OneRoadmap} />
              <Route path="/search" component={Search} />
              <Route exact path="/add" component={RoadmapAdder} />
              <Route exact path="/register" component={Register} />
              <Route exact path="/login" component={Login} />
              <Route
                exact
                path="/savedRoadmaps"
                component={SavedRoadmapsView}
              />
              <Route path="/profile" component={AuthorProfile} />
              <Route exact path="/account/edit" component={Profile} />
            </div>
          </Provider>
        </Router>`

我以前在我的NavBar组件中进行了自动身份验证，因为由于<Route path="/" component={NavBar}/>，NavBar将出现在每个URL中，我以为我可以使用NavBar自动登录我的用户使用一个名为loginUser的redux操作，然后更新了一些redux状态，例如isAuthenticated和user_info。问题是，如果我要渲染 NavBar 并假设SavedRoadmapsView，则SavedRoadmapsView不会立即获得redux状态，因为它与 NavBar 并行运行。

我尝试自动在App.js中登录用户，例如：

 `  async componentDidMount() {

    var email = localStorage.getItem("email");
    var password = localStorage.getItem("password");
    var userData = { email: email, password: password };
    await loginUser(userData);

  }` 

它似乎没有用。难道loginUser是一个redux动作，不能在Provider之外使用？您对此有何见解？提前致谢。