react路由權限設置

參考：https://tylermcginnis.com/react-router-protected-routes-authentication/ 解決路由私有方法

創建PrivateRoute.js文件

import React from 'react'
import { Route, Redirect } from 'react-router-dom'
import { connect } from 'react-redux'
import PropTypes from 'prop-types'

const PrivateRoute = ({ component: Component, auth, ...rest }) => (
    <Route
        {...rest}
        render={props => auth.isAuthenticated === true ? <Component {...props} /> : <Redirect to='/login' />}
    />
)

PrivateRoute.prototype = {
    auth: PropTypes.object.isRequired
}
//redux 拿取判別登陸狀態的值
const mapStateToProps = state => ({
    auth: state.auth
})

export default connect(mapStateToProps, {})(PrivateRoute)

使用方式

//私有路由配置
import PrivateRoute from './common/PrivateRoute'


//需要授權的頁面
 <Switch>
                <PrivateRoute path="/xxx" component={xxx} exact />
  </Switch>