Question

我有一个超时对话框，当令牌在X分钟后过期时，我想在各个组件中进行渲染（我已经硬编码了时间）。 Material-UI Dialog用于弹出对话框。我设置了两个超时时间，其中一个超时时间为29分钟：30秒，用于发出警告消息，而30分钟将强制注销。

我看了以下example for ideas。

const AlertDialog = props => {
  const [warningTimeout, setWarningTimeout] = useState(1770000);
  const [limitTimeout, setLimitTimeout] = useState(1800000);
  const [open, setOpen] = useState(true);

  const handleContinue = () => {
    //this will make an api call to refresh the token, where we must update the context with the new token
    setOpen(false);
  };

  const handleLogout = () => {
    //this will destroy the session, clear localstorage
  };

  const warn = () => {
    console.log("Warning, 30 minutes has past");
  };
  const logout = () => {
    console.log("You have been logged out");
  };

  const setTimeouts = () => {
    const warnTimeout = setTimeout(warn, warningTimeout);
    const logoutTimeout = setTimeout(logout, limitTimeout);
  };

  useEffect(() => {
    setTimeouts();
  });

  return (
    <div>
      <Dialog
        disableBackdropClick
        disableEscapeKeyDown
        open={open}
        aria-labelledby="alert-dialog-title"
        aria-describedby="alert-dialog-description"
      >
        <DialogTitle id="alert-dialog-title">{"Session Timeout"}</DialogTitle>
        <DialogContent>
          <DialogContentText id="alert-dialog-description">
            If you wish to continue the current session please press continue.
            You have 30 seconds to decide or you will be logged out.
          </DialogContentText>
        </DialogContent>
        <DialogActions>
          <Button onClick={handleLogout} color="primary">
            Logout
          </Button>
          <Button onClick={handleContinue} color="primary" autoFocus>
            Continue
          </Button>
        </DialogActions>
      </Dialog>
    </div>
  );
};

export default AlertDialog;

该项目具有受保护的路线，因此它们看起来像这样。我想将此警报对话框传递给所有<AdminPrivateRoute>的

const Routes = () => (
  <UserProvider>
    <TokenProvider>
      <Router>
        <Switch>
          <Route exact path="/" component={LoginForm} />
          <AdminPrivateRoute path="/dashboard" component={Dashboard} />
          <AdminPrivateRoute path="/secondary-page" component={SecondaryPage} />
        </Switch>
      </Router>
    </TokenProvider>
  </UserProvider>
);

使用警报对话框包装以上组件是否可行？ <AdminPrivateRoute path="/dashbaord" component={AlertDialog(Dashboard)} /> 有更好的方法吗？

reference的Codesandbox，您可以使用任何凭据登录。

Answer 1

将<AlertDialog />组件放在<Switch />之外似乎可以解决问题。

const Routes = () => (
  <Router>
    <AlertDialog />
    <Switch>
      <Route exact path="/" component={LoginForm} />
      <AdminPrivateRoute path="/dashboard" component={Dashboard} />
    </Switch>
  </Router>
);

其他路径组件中的“渲染超时”对话框

1 个答案: