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 ?  (

            <Route  path={path} exact={exact}  strict={strict}  render={(props)=>( <Component {...props} /> )} />

        ) : <Authenricated />;

    }

}

PrivateRoute.propTypes  ={

        path:PropTypes.string.isRequired,

        exact:PropTypes.bool,

        strict:PropTypes.bool,

        component:PropTypes.func.isRequired

}

export default withRouter(PrivateRoute);

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

        ? <LoadingIndicator />

        : <Route {...rest} render={props => (

            isAuthed

              ? <Component {...props} />

              : <Redirect to={{ pathname: '/login', state: { from: props.location } }} />

          )} />

    )

  }

}

const mapStateToProps = state => ({

  // 登入系統後會於 redux 中註記登入狀態

  isLogin: get(state, 'auth.isLogin')

})

const mapDispatchToProps = dispatch => ({

})

export default connect(mapStateToProps, mapDispatchToProps)(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 ?  (

            <Route  path={path} exact={exact}  strict={strict}

                    render={(props)=>( <Component {...props} /> )} />) : <Unauthorized />;

    }

}

export default withRouter(PrivateRoute);