使用提取进行身份验证

时间:2018-12-19 20:39:56

标签: node.js reactjs rest passport.js fetch-api

我使用passportjs创建了REST Api用户身份验证,该身份验证与邮递员一起很好地工作。但是,当我尝试将后端与我的react App集成时,身份验证不起作用,我似乎无法弄清楚我的代码是什么解决方案

我正在使用访存Api将请求发送到后端,同样在package.json proxy localhost:5000中包含的我的react App中。并且登录路径为/ user / login

constructor(props){
    super(props);
      this.state = {
      isLoading: true,
      token: '',
      email: '',
      password: '',
      signInError: []
    };

    this.onTextBoxEmail = this.onTextBoxEmail.bind(this);
    this.onTextBoxPassword = this.onTextBoxPassword.bind(this);
    this.onSignIn = this.onSignIn.bind(this);
  }
  componentDidMount() {
  
  }

   onTextBoxEmail(event){ this.setState({email: event.target.value,})}
   onTextBoxPassword(event){this.setState({ password: event.target.value,})}

   onSignIn () {
    const {
      email,
      password,
    } = this.state;
    fetch('/user/login', {
      method: "POST",
      body: JSON.stringify({
        email: email,
        password: password,
      })
    }).then(res => console.log(res))
   }

  render() { 
    const {
      email,
      password,
    } = this.state
    return (
      <>
        <div className="container">
          <Row className="py-5" >
          <Col md="6" className="offset-1 mx-auto py-5" >
            <Card className="card-user">

                <CardText className="py-3 px-3">
                  <div className="card-description">
                     <CardBody>
                     <h2 className="text-center"> Sign In</h2>
                  <Form>
                      <Col className="pl-md-1" md="12">
                        <FormGroup>
                          <Input
                            value={email}
                            placeholder="mike@email.com"
                            type="email"
                            onChange={this.onTextBoxEmail}
                             />
                        </FormGroup>
                      </Col>
                    <Col className="pl-md-1" md="12">
                        <FormGroup>
                          <Input
                            value={password}
                            placeholder="Password"
                            type="password"
                            onChange={this.onTextBoxPassword}
                          />
                        </FormGroup>
                      </Col>
                    <CardFooter>
                  <div className="button-container  py-3">
                    <Button 
                    className="btn-fill" 
                    color="primary" 
                    type="submit"
                    onClick={this.onSignIn}
                    >
                      Sign in
                    </Button>
                  </div>
                  <p> Don't have Account. Sign up <a href="register"> here </a> </p>
                </CardFooter>
                  </Form>

0 个答案:

没有答案