Question

我的reactjs应用程序有两种类型的用户，即Artist和Lovers。我的某些组件仅供艺术家使用，而某些组件仅可供爱好者使用。因此，我需要实现艺术家和用户路由，这将仅有助于对所需的用户类型进行大规模访问。这是我的路由器交换机

<Switch>
    <Route exact path='/' component={Home} />
    <UserRoute authed={this.state.lover} path='/user-dash' component={About} />
    <ArtistRoute authed={this.state.artist} path='/artist-dash' component={Contact} />
    <Route path='/SignupUser' component={SignupUser} />
</Switch>

这是我的UserRoute代码

import React from 'react';
import { Route, Redirect } from 'react-router-dom';
export const UserRoute = ({ component: Component, authed, ...rest }) => (
  <Route {...rest} render={props => (
        authed
        ? <Component {...props} />
        : <Redirect to={{ pathname: '/', state: { from: props.location } }} />
   )} />
)

我希望能够接收在交换机中传递的UserRoute中的authed值。我不知道为什么在UserRoute中经过身份验证的总是返回false。即使this.state.lover传递给它，也是如此。请我做错了什么。谢谢

Answer 1

Route.jsx

<Switch>
    <Route exact path='/' component={Home} />
    <Route path='/user-dash' component={AuthCheck(About)} /> // Wrap the component with HOC
</Switch>

AuthCheck.jsx

export default function(Component) {
    class AuthCheck extends Component {
        render() {
            if (this.props.auth.payload) {
                return <Component {...this.props} /> // Component if auth is true
            } else {
                return <Route path='*' exact={true} component={NotFound} /> // 404 if not auth
            }
        }
    }

    function mapStateToProps(state) {
        return { auth: state.auth }
    }

    return connect(mapStateToProps)(AuthCheck)
}

检查上面的示例是否可以在redux上使用

确保将AuthCheck导入到Route.jsx文件中

使用两个私有路由对reactjs应用程序进行身份验证

1 个答案: