即使使用错误的凭据也能成功登录吗？

Question

我对JavaScript框架还很陌生，但是我仍然不确定很多有关它的内容。因此，我的问题几乎是，当我单击登录表单的“提交”按钮时，它的行为就好像它已成功登录。

“无法读取属性'password'为null”

如果您键入的用户不存在，但

“玩家不存在。”

密码输入错误时。

来自后端的模型/Players.js

players.post('/login', async (req, res) => {
console.log(req.body);
await Player.findOne({
   where: {
       username: req.body.username
   }
 })
   .then(player => {
       if(bcrypt.compareSync(req.body.password, player.password)) {
           let playertoken = jwt.sign(player.dataValues, process.env.SECRET_KEY, { expiresIn: 1440 });
           res.json({ playertoken: playertoken });
       } else {
           res.send("Player does not exist.");
       }
   })
   .catch(err => {
       res.send("Error: " + err);
   })});
前端的UserFunctions.js

export const login = player => {
return axios
    .post('http://localhost:4000/players/login', {
        username: player.username,
        password: player.password
    })
    .then(response => {
        localStorage.setItem('playertoken', response.data);
        return response.data;
    })
    .catch(err => {
        console.log(err);
        throw err;
    });};
Homepage.js

import React, { Component } from 'react';
import { login } from '../../UserFunctions'
import './HomePage.css';

class HomePage extends Component {

constructor(props){
    super(props);
    this.state = {
        username: '',
        password: '',
        errors: {}
    };

    this.onChange = this.onChange.bind(this);
    this.onSubmit = this.onSubmit.bind(this);
}

onChange(e) {
    this.setState({ [e.target.name]: e.target.value })
}

onSubmit(e) {
    e.preventDefault();

    const player = {
        username: this.state.username,
        password: this.state.password
    };

    login(player).then(res => {
        if (res) {
            this.props.history.push('/')
        }
    })
}

render() {

    const nLoggedInText = (
        <h4>Please Log in.</h4>
    );

    const loggedInText = (
        <div>
            <h4>In here you will be able to track your training progress, match stats and body comparisons.</h4>
            <h4>You may now begin tracking your progress have fun!</h4>
        </div>
    );

    const logInForm = (
        <div className="row d-flex justify-content-center">
            <div className="col-lg-3 rounded border">
                <form onSubmit={this.onSubmit} className="m-3">
                    <div className="form-group">
                        <label htmlFor="username">Username</label>
                        <input
                            className="form-control"
                            name="username"
                            placeholder="username"
                            value={this.state.username}
                            onChange={this.onChange}
                            required
                        />
                    </div>
                    <div className="form-group">
                        <label htmlFor="password">Password</label>
                        <input
                            className="form-control"
                            type="password"
                            name="password"
                            placeholder="password"
                            value={this.state.password}
                            onChange={this.onChange}
                            required
                        />
                    </div>

                    <button type="submit" className="btn btn-bulldogs">Log In</button>

                </form>

            </div>
        </div>
    );


    return (
        <div className="container">
            <h1 className="nBrand">BULLDOGS</h1>
            <h3>Welcome {}!</h3>
            {localStorage.playertoken ? loggedInText : nLoggedInText}

            {!localStorage.playertoken ? logInForm : null}


        </div>
    );
}}
export default HomePage;
homepage

login

我对JavaScript框架还很陌生，但是我仍然不确定很多有关它的内容。所以我的问题几乎是，当我单击登录表单的“提交”按钮时，它的行为就好像...

Answer 1

因此，我的问题几乎是，当我单击登录表单的提交按钮时，就好像它已成功登录一样。[即使有错误。]