Question

我是软件开发的初学者。我正在尝试构建一个可在诊所使用的React Web应用程序。当前，该应用程序将只有两个用户。在该应用程序中，患者将使用单一表格输入数据，医生将能够在其仪表板上查看数据。我不希望用户访问医生的仪表板，因此我想限制他对表单提交的访问。另外，只有医生才具有凭据，因为他/她将是该应用程序的所有者。请指导我如何进行。

Answer 1

将您登录的用户详细信息保留在减速器中，以便您可以识别登录的用户是患者还是医生

如果用户是医生，则添加条件组件，然后显示医生仪表板

import React from "react"
import { connect } from "react-redux"
import { withRouter, Redirect } from "react-router-dom"
import { compose } from "recompose";

class formContainer extends SignUp {
    constructor(props) {
        super(props)
        this.state = {
        }
    }
    render() {
        return (
            <div className="mid-container">
                {
                    this.props.userData.type == "DOCTOR" ?
                        <DoctorDashboard/> // if user is doctor then show doctor dashboard 
                        :
                        <PatientDashboard/>
                }
            </div>
        );
    }

}

const mapStateToProps = (state) => {
    return {
        // save your login user data in react redux
        userData: state.login.userData  //  here is your userdata of loggedin user, here you can identify is logged in user is patient or doctor if not keep user type like patient or doctor
    }
}

export default compose(
    withRouter,
    connect(mapStateToProps, mapDispatchToProps)
)(formContainer)

限制React应用中的用户表单访问页面

1 个答案: