react路由权限设置

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

创建PrivateRoute.js文件

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21

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>