码迷,mamicode.com
首页 > 其他好文 > 详细

全栈开发React-私有路由

时间:2019-01-30 16:02:40      阅读:124      评论:0      收藏:0      [点我收藏+]

标签:end   相同   const   ext   cat   nec   top   out   vat   

demo

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.propTypes = {
    auth: PropTypes.object.isRequired
  }
const mapStateToProps = state => ({
    auth: state.auth,
})
  export  default  connect(mapStateToProps)(PrivateRoute);

据用户的auth状态,我们将渲染Redirect或渲染组件

以下是我们PrivateRoute组件的要求

  1. 它与<Route />具有相同的API。
  2. 它呈现<Route />并将所有道具传递给它。
  3. 它检查用户是否经过身份验证,如果是,则呈现“组件”道具。如果没有,它会将用户重定向到/ login。

全栈开发React-私有路由

标签:end   相同   const   ext   cat   nec   top   out   vat   

原文地址:https://www.cnblogs.com/guangzhou11/p/10337860.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!