react privateRoute

Posted 2020-10-30 Nyan

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);

 使用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
        ? <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)