Question

我用react，redux和react-router构建了一个CRUD应用程序。如果从PrivateRoutes刷新了页面，则应用程序将重定向到[ { "facts": "1" }, { "facts": "2" }, { "facts": "3" }, { "facts": "4" }, { "facts": "5" } ]。我正在通过从/login获取数据并调度操作来更新App组件中的redux来更新用户的登录状态。

App.js

localStorage

在App组件中路由

const updateLoginStatus = () => {
  if (checkIfUserLoggedIn()) {
    const user = getLoginInitialState();
    dispatch(updateLoginInitialState(user));
  }
};

useEffect(() => {
  updateLoginStatus();
}, [login.isLoggedIn]);

PrivateRoute.js

<Router>
  <Switch>
    <Route exact path="/" component={Home} />
    <Route exact path="/login" component={Login} />
    <Route exact path="/register" component={Register} />
    <Route exact path="/logout" component={Logout}></Route>
    <PrivateRoute exact path="/expenses" component={ListExpensesComponent} />
    <PrivateRoute exact path="/expenses/add-expense" component={AddExpenseComponent} />
    <PrivateRoute
      exact
      path="/expenses/edit-expense/:expense_id"
      component={EditExpenseComponent}
    />
  </Switch>
</Router>;

我找到的一个解决方案是

在登录const login = useSelector((state) => state.loginReducer); return ( <div> <Route {...rest} render={(props) => { if (!login.isLoggedIn) { return <Redirect to="/login" />; } return <Component {...props} />; }}></Route> </div> );中再添加一个动作，并在登录Reducer中添加UPDATE_LOGIN_REQUEST属性，并设置loading。因此，显示loading: true直到登录状态被更新。

还有其他方法可以处理吗？预先感谢。

使用React Redux的私人路线

0 个答案: