import React from 'react';import PropTypes from 'prop-types';import {Route,Redirect,withRouter} from 'react-router-dom';import LoginUser from 'service/LoginUser';//私有路由，只有登录的用户才能访问class PrivateRoute extends React.Component{    constructor(props) {        super(props);        this..state = {            isAuth : _loginUser.hasLogin();        }    }    componentWillMount(){        if(!isAuth){          const {history} = this.props;          setTimeout(() => {            history.replace("/login");          }, 1000)        }    }    render(){        const { component: Component,path="/",exact=false,strict=false} = this.props;        return this.state.isAuth ?  (            
     
      ( 
       )} />        ) : 
      ;    }}PrivateRoute.propTypes  ={        path:PropTypes.string.isRequired,        exact:PropTypes.bool,        strict:PropTypes.bool,        component:PropTypes.func.isRequired}export default withRouter(PrivateRoute);
     

 使用redux:

import { Component } from 'react'import { connect } from 'react-redux'import { get } from 'lodash'import PropTypes from 'prop-types'import toastr from 'toastr'import { Route } from 'react-router-dom'import { Redirect } from 'react-router'import { LoadingIndicator } from 'components'export class PrivateRoute extends Component {  constructor (props) {    super(props)    this.state = {      isLoading: true, // 是否於權限檢核中      isAuthed: false  // 是否通過權限檢核    }  }  static propTypes = {    component: PropTypes.any.isRequired,    funcCode: PropTypes.string.isRequired  }  checkAuth = async () => {    let isAuthed = false    const { isLogin, funcCode } = this.props    if (isLogin) {            this.setState(state => ({ ...state, isLoading: true }))      isAuthed = await api.checkAuthWithServer(funcCode)    }    if (!isAuthed) {           toastr.warning('系統未登录，请先登录')    }    // 更新狀態 1.檢核結束 2.檢核結果    this.setState(state => ({ ...state, isAuthed: isAuthed, isLoading: false }))  }  componentWillMount = async () => {    await this.checkAuth()  }  componentWillReceiveProps = async (nextProps) => {    if (nextProps.location.pathname !== this.props.location.pathname) {      await this.checkAuth()    }  }    render () {    const { component: Component, ...rest } = this.props    const { isLoading, isAuthed } = this.state    return (      isLoading === true        ? 
             : 
     
       (            isAuthed              ? 
                    : 
                )} />    )  }}const mapStateToProps = state => ({  // 登入系統後會於 redux 中註記登入狀態  isLogin: get(state, 'auth.isLogin')})const mapDispatchToProps = dispatch => ({})export default connect(mapStateToProps, mapDispatchToProps)(PrivateRoute)
     

 update privateRoute:

import React from 'react';import {toastr} from "react-redux-toastr";import {Route, withRouter} from 'react-router-dom';import LoginUser from 'service/login-service/LoginUser';import Unauthorized from "page/error/Unauthorized";const _loginUser = new LoginUser();//私有路由，只有登录的用户才能访问class PrivateRoute extends React.Component{    constructor(props) {        super(props);        this.state = {            isAuth : _loginUser.hasLogin()    }    }    componentWillMount(){        if(!this.state.isAuth){            toastr.error('login timeOut, return to the login page after 3s');            const {history} = this.props;            setTimeout(() => {                history.replace("/login");            }, 3000)        }    }    render(){        const { component: Component, path="/", exact=false, strict=false} = this.props;        return this.state.isAuth ?  (            
     
      ( 
       )} />) : 
      ;    }}export default withRouter(PrivateRoute);