免除特定路由的空闲超时

鉴于我只希望它适用于某些特定的路线，您如何免除某些路线的空闲时间。我试过两种方法，
我创建了idletimeoutcontainer.js容器，其中包含所有逻辑，但当我导入mainapp.js以将其 Package 在我需要它处理的组件上时，整个应用程序将变为空白。因为我不想在mainapp.js中实现我的逻辑，
第二，当我将逻辑引入mainapp来实现时，它会影响我的所有路由，即使我尝试将其环绕在我需要的路由上，它仍然会影响我的所有路由，当它重定向时，它不会重定向到我设置的登录页面。
这是一个包含逻辑的主应用程序。mainapp.js

import React, { Component } from 'react';
import { withRouter } from 'react-router-dom';
import { BrowserRouter as Router, Route, Switch } from "react-router-dom";
import IdleTimer from 'react-idle-timer';
import Swal from 'sweetalert2';
import "./index.css";

// Security Components
import PrivateRoute from "./components/ProtectedRoutes";
import IdleTimeroutContainer from './components/IdleTimerContainer/IdleTimeoutContainer';

import { IdleTimeOutModal } from './components/IdleTimerContainer/TimeoutModal';

// Authentication Routes
import LoginPage from "./components/Auth/LoginPage";
import MainAdminDashBoard from "./views/Dashboard/MainAdminDashBoard";
import TrucksTable from "./views/Table/TrucksTable"
import AuctionTruck from "./views/Truck/AuctionTruck/AuctionTruckTable";
import SignUpTruckTable from "./views/Truck/SignUpTruck/SignUpTruckTable";
import ContactUs from "./views/ContactUs/ContactUsTable";
import Users from "./views/User/Users";
import NotFound from "./components/NotFound";

class MainApp extends Component {
  constructor(props) {
    super();

    this.state = {
      timeout: 2000 * 5 * 1,
      showModal: false,
      userLoggedIn: false,
      isTimedOut: false
    }
    // console.log(props)
    this.handleClose = this.handleClose.bind(this)
    this.handleLogout = this.handleLogout.bind(this)

    this.idleTimer = null
    this.onAction = this._onAction.bind(this)
    this.onActive = this._onActive.bind(this)
    this.onIdle = this._onIdle.bind(this)
  }

  handleClose() {
    this.setState({ showModal: false })
  }

  handleLogout() {
    this.setState({ showModal: false })
    this.props.history.push('/')
    window.localStorage.clear();
  }

  _onAction(e) {
    console.log('user did something', e)
    this.setState({ isTimedOut: false })
  }

  _onActive(e) {
    console.log('user is active', e)
    this.setState({ isTimedOut: false })
  }

  _onIdle(e) {
    console.log('user is idle', e)
    const isTimedOut = this.state.isTimedOut
    if (isTimedOut) {
      this.props.history.push('/')
      window.localStorage.clear();
      Swal.fire({
        title: 'Sweet!',
        text: 'You have been logged out for security reasons, please log back in to continue.',
      })
    } else {
      this.setState({ showModal: true })
      this.idleTimer.reset();
      this.setState({ isTimedOut: true })
    }
  }

  render() {
    return (

      <div className="flexible-content">
        <IdleTimer
          ref={ref => { this.idleTimer = ref }}
          element={document}
          onActive={this.onActive}
          onIdle={this.onIdle}
          onAction={this.onAction}
          debounce={250}
          timeout={this.state.timeout}
        />
        <Router>
          <Switch>
          <Route exact path="/" component={LoginPage} />
            {/* <IdleTimeroutContainer> */}
            <PrivateRoute exact path='/admin/dashboard' component={MainAdminDashBoard} />
            <PrivateRoute exact path="/admin/trucks-tables" component={TrucksTable} />
            <PrivateRoute exact path="/admin/register-truck" component={SignUpTruckTable} />
            <PrivateRoute exact path="/admin/auction-truck" component={AuctionTruck} />
            <PrivateRoute exact path="/admin/users" component={Users} />
            <PrivateRoute exact path="/admin/contact-us" component={ContactUs} />
            {/* </IdleTimeroutContainer> */}

            <Route path="*" component={NotFound} />
          </Switch>
        </Router>
        <IdleTimeOutModal
          showModal={this.state.showModal}
          handleClose={this.handleClose}
          handleLogout={this.handleLogout}
        />
      </div>
    );
  }

};

export default withRouter(MainApp);

idletimeoutcontainer.js

import React, { Component } from 'react';
import IdleTimer from 'react-idle-timer';
import { withRouter } from 'react-router-dom';

// import { MDBCardBody, MDBCard, MDBCol, MDBRow } from "mdbreact";
import Swal from "sweetalert2";

import { IdleTimeOutModal } from './TimeoutModal';

class IdleTimerOutContainer extends Component {
  constructor(props) {
    super(props);

    this.state = {
      timeout: 2000 * 5 * 1,
      showModal: false,
      userLoggedIn: false,
      isTimedOut: false
    }

    this.handleClose = this.handleClose.bind(this)
    this.handleLogout = this.handleLogout.bind(this)

    this.idleTimer = null
    this.onAction = this._onAction.bind(this)
    this.onActive = this._onActive.bind(this)
    this.onIdle = this._onIdle.bind(this)
  }

  handleClose() {
    this.setState({ showModal: false })
  }

  handleLogout() {
    this.setState({ showModal: false })
    this.props.history.push('/')
    window.localStorage.clear();
  }

  _onAction(e) {
    console.log('user did something', e)
    this.setState({ isTimedOut: false })
  }

  _onActive(e) {
    console.log('user is active', e)
    this.setState({ isTimedOut: false })
  }

  _onIdle(e) {
    console.log('user is idle', e)
    const isTimedOut = this.state.isTimedOut
    if (isTimedOut) {
      this.props.history.push('/')
      window.localStorage.clear();
      Swal.fire({
        title: 'Sweet!',
        text: 'You have been logged out for security reasons, please log back in to continue.',
      })
    } else {
      this.setState({ showModal: true })
      this.idleTimer.reset();
      this.setState({ isTimedOut: true })
    }
  }

  render() {
    return (

      <div className="flexible-content">
        {/* <TopNavigation />
          <SideNavigation /> */}
        <div className="flexible-content">
          <IdleTimer
            ref={ref => { this.idleTimer = ref }}
            element={document}
            onActive={this.onActive}
            onIdle={this.onIdle}
            onAction={this.onAction}
            debounce={250}
            timeout={this.state.timeout}
          />

          {/* <MainApp /> */}
          {/* <main id="content" className="p-3">
            <MDBRow className="mb-1">
              <MDBCol md="12" className="mb-4">
                <MDBCard>
                  <MDBCardBody>

                  </MDBCardBody>
                </MDBCard>
              </MDBCol>
            </MDBRow>
          </main> */}
          <IdleTimeOutModal
            showModal={this.state.showModal}
            handleClose={this.handleClose}
            handleLogout={this.handleLogout}
          />
        </div>
      </div>
    )
  }
}

export default withRouter(IdleTimerOutContainer);

mainapp.js中没有逻辑

import React, { Component } from 'react';
import { withRouter } from 'react-router-dom';
import { BrowserRouter as Router, Route, Switch } from "react-router-dom";
import "./index.css";

// Security Components
import PrivateRoute from "./components/ProtectedRoutes";
import IdleTimeroutContainer from './components/IdleTimerContainer/IdleTimeoutContainer';

// Authentication Routes
import LoginPage from "./components/Auth/LoginPage";
import MainAdminDashBoard from "./views/Dashboard/MainAdminDashBoard";
import TrucksTable from "./views/Table/TrucksTable"
import AuctionTruck from "./views/Truck/AuctionTruck/AuctionTruckTable";
import SignUpTruckTable from "./views/Truck/SignUpTruck/SignUpTruckTable";
import ContactUs from "./views/ContactUs/ContactUsTable";
import Users from "./views/User/Users";
import NotFound from "./components/NotFound";

class MainApp extends Component {
  render() {
    return (

      <div className="flexible-content">

        <Router>
          <Switch>
            <Route exact path="/" component={LoginPage} />
            <IdleTimeroutContainer>
              <PrivateRoute exact path='/admin/dashboard' component={MainAdminDashBoard} />
              <PrivateRoute exact path="/admin/trucks-tables" component={TrucksTable} />
              <PrivateRoute exact path="/admin/register-truck" component={SignUpTruckTable} />
              <PrivateRoute exact path="/admin/auction-truck" component={AuctionTruck} />
              <PrivateRoute exact path="/admin/users" component={Users} />
              <PrivateRoute exact path="/admin/contact-us" component={ContactUs} />
            </IdleTimeroutContainer>

            <Route path="*" component={NotFound} />
          </Switch>
        </Router>
      </div>
    );
  }

};

export default withRouter(MainApp);

免除特定路由的空闲超时

暂无答案！

相关问题

热门标签

最新问答