我是否没有正确地从api检索/向api发送数据?react.js前端页面不会显示除my jwt之外的其他字段

mwg9r5ms  于 2021-09-23  发布在  Java
关注(0)|答案(0)|浏览(195)

昨天我发布了一个类似的问题,但不够具体,所以这是我第二次尝试提出一个令人满意的问题。
这是后端处理登录的部分:

exports.signin = (req, res) => {
    User.findOne({
        where: {
            email: req.body.email
        }
    }).then(user => {
        if (!user) {
            return res.status(400).send('The specified user does not match any registered user.');
        }

        var passwordIsValid = bcrypt.compareSync(req.body.password, user.password);
        if (!passwordIsValid) {
            return res.status(401).send({ auth: false, accessToken: null, reason: "Your entered password is incorrect. Please try again." });
        }

        var token = jwt.sign({ id: user.id }, config.secret, {
            expiresIn: 86400 // expires in 24 hours
        });

        res.status(200).send({ auth: true, accessToken: token });
    }).catch(err => {
        res.status(500).send('Error: ' + err);
        console.log(err);
    });}

这是前端处理登录的部分:

export default class Login extends Component {
    constructor(props) {
        super(props);
        this.handleLogin = this.handleLogin.bind(this);
        this.onChangeEmail = this.onChangeEmail.bind(this);
        this.onChangePassword = this.onChangePassword.bind(this);

        this.state = {
            email: "",
            password: "",
            loading: false,
            message: ""
        };
    }

    onChangeEmail(e) {
        this.setState({
            email: e.target.value
        });
    }

    onChangePassword(e) {
        this.setState({
            password: e.target.value
        });
    }

    handleLogin(e) {
        e.preventDefault();

        this.setState({
            message: "",
            loading: true
        });

        this.form.validateAll();

        if (this.checkBtn.context._errors.length === 0) {
            AuthService.login(this.state.email, this.state.password).then(
                () => {
                    this.props.history.push("/dashboard");
                    window.location.reload();
                },
                error => {
                    const resMessage =
                        (error.response &&
                            error.response.data &&
                            error.response.data.message) ||
                        error.message ||
                        error.toString();

                    this.setState({
                        loading: false,
                        message: resMessage
                    });
                }
            );
        } else {
            this.setState({
                loading: false
            });
        }
    }

这也是我在前端的注册部分:

export default class Register extends Component {
    constructor(props) {
        super(props);
        this.handleRegister = this.handleRegister.bind(this);
        this.onChangeName = this.onChangeName.bind(this);
        this.onChangeUsername = this.onChangeUsername.bind(this);
        this.onChangeEmail = this.onChangeEmail.bind(this);
        this.onChangePassword = this.onChangePassword.bind(this);

        this.state = {
            name: "",
            username: "",
            email: "",
            password: "",
            successful: false,
            message: ""
        };
    }

    onChangeName(e) {
        this.setState({
            name: e.target.value
        });
    }

    onChangeUsername(e) {
        this.setState({
            username: e.target.value
        });
    }

    onChangeEmail(e) {
        this.setState({
            email: e.target.value
        });
    }

    onChangePassword(e) {
        this.setState({
            password: e.target.value
        });
    }

    handleRegister(e) {
        e.preventDefault();

        this.setState({
            message: "",
            successful: false
        });

        this.form.validateAll();

        if (this.checkBtn.context._errors.length === 0) {
            AuthService.register(
                this.state.name,
                this.state.username,
                this.state.email,
                this.state.password
            ).then(
                response => {
                    this.setState({
                        message: response.data.message,
                        successful: true
                    });
                },
                error => {
                    const resMessage =
                        (error.response &&
                            error.response.data &&
                            error.response.data.message) ||
                        error.message ||
                        error.toString();

                    this.setState({
                        successful: false,
                        message: resMessage
                    });
                }
            );
        }
    }

这部分是我前端的authservice:

import axios from "axios";

const API_URL = "http://localhost:3000/";

class AuthService {
    login(email, password) {
        return axios
            .post(API_URL + "signin", {
                email,
                password
            })
            .then(response => {
                if (response.data.accessToken) {
                    localStorage.setItem("user", JSON.stringify(response.data));
                }

                return response.data;
            });
    }

    logout() {
        localStorage.removeItem("user");
    }

    register(name, username, email, password) {
        return axios.post(API_URL + "signup", {
            name,
            username,
            email,
            password
        });
    }

    getCurrentUser() {
        return JSON.parse(localStorage.getItem('user'));
    }
}

export default new AuthService();

我拍了一张照片只是为了说明我的意思,但请注意我的令牌是如何完全按照指定的方式显示的,而所有其他字段都保持空白。因为登录可以工作,我知道我的角色现在是正确的,并且我知道它在某种程度上正确地标识了“用户”,但是信息并没有以某种方式传递。我的预期功能是,我可以登录,我的 Jmeter 板页面将显示来自currentuser的所有信息。我的主管在这件事上甚至帮不上忙,所以我在这里很为难。图像链接:https://ibb.co/8ynydjh
此外,我会发布到我的存储库的链接,以便有人可以在需要时查看更多详细信息,但希望不会真的需要查看,因为我在这个问题上提出了我认为需要什么。
存储库:
https://github.com/vaahtlnirn1/azure-backend (在《 Postman 》中完美演绎)
https://github.com/vaahtlnirn1/azure-frontend (其中存在错误,但可能需要查看后端。)
非常感谢您的帮助。提前谢谢!

暂无答案!

目前还没有任何答案,快来回答吧!

相关问题