Блог

Главная - Вопросы по программированию - Маршрутизация разных URL-адресов в зависимости от функции с использованием Javascript / React

Маршрутизация разных URL-адресов в зависимости от функции с использованием Javascript / React

#javascript #node.js #reactjs #routes #axios

#javascript #node.js #reactjs #маршруты #axios

Вопрос:

Я хочу маршрутизировать разные URL-адреса в зависимости от входа в систему, который вызывается axios в этом коде:

 import React, {Component} from "react";
import axios from "axios";
import "./ComponentStyles.css";

class Login extends Component {

    state = {
        username: "",
        password: ""
    }

    handleChange = ({target}) => {
        const { name, value } = target;
        
        this.setState({
          [name]:value
        });
    };

    Login = (event) => {
        event.preventDefault();
        const User = {
            username: this.state.username,
            password: this.state.password
        }
  
        axios({
            url:"/api/login",
            method: "POST",
            data: User
        })
        .then((res) => {
            if (res === true) {
                console.log('Logged in!');
                window.location = '/Menu';
            }
            else {
                window.location = '/';
                console.log('Failure. Could not Login.');
        })
        .catch((error) => {
            console.log(error);
            window.location = '/';
        })
      };

    // more code

}

в этом я хочу установить значение в window.location зависимости от результата функции user_authMySQL , который находится в этом другом коде:

 const express = require("express");
const router = express.Router();

// some code

router.post('/login', async (req, res) => {
    const User = req.body;  // Object type: User
    var resultTemp = false;

    // This function recieves a username, password, and callback function
    // result in callback function is true if login succeeds, otherwise it's false
    await user_authMySQL(User.username, User.password, function (result) {
        resultTemp = resu<
        console.log(resultTemp); // To see what's stored
        if (resultTemp === false ) 
            console.log("Cannot login, data is invalid.");
        else console.log("Loggin in!");
    });  

    console.log(resultTemp   ' = resultTemp'); // This
    res.json();
});

Когда я запускаю его и использую неверные данные для входа, это результат терминала:

 [Server] false = resultTemp
[Server] POST /api/login 200 - - 5.987 ms
[Server] false
[Server] false
[Server] Cannot login, data is invalid.

И когда используются правильные данные для входа, это результат:

 [Server] false = resultTemp
[Server] POST /api/login 200 - - 1.258 ms
[Server] true
[Server] true
[Server] Loggin in!

Проблема в том, что приложение всегда выполняет window.location = '/' , но не выполняет console.log() ни для одного из условий в

         .then((res) => {
            if (res === true) {
                console.log('Logged in!');
                window.location = '/Menu';
            }
            else {
                window.location = '/';
                console.log('Failure. Could not Login.');
        })
        .catch((error) => {
            console.log(error);
            window.location = '/';
        })

Я не знаю, как маршрутизировать разные URL-адреса в зависимости от функции, и любая помощь приветствуется 🙂

Комментарии:

1. Это res простое логическое значение или это объект ответа, к которому вам нужно получить доступ? Вы проверили вкладку «Сеть» в инструментах разработки или зарегистрировали ее, чтобы узнать, что это на самом деле? Какую библиотеку маршрутизации / навигации использует ваше приложение?

2. Устанавливаете ли вы JSON ответа на своем сервере в router.post режиме обработки?

3. @DrewReese res в .then((res) => { * code *} части должен быть простым логическим значением, но выполнение никогда не достигает then ни catch того, ни другого, оно застревает в axios функции.

4. как сказал @DrewReese. попробуйте res.json(resultTemp ) . также при получении ответа следует использовать res.data===true или что-то еще? и попробуйте посмотреть, что вы получаете на вкладке Сеть в вашем браузере при отправке запроса

5. @Jerry Я внес эти 2 изменения, и это сработало! Большое вам спасибо 🙂

Ответ №1:

ну, у вас есть несколько проблем с вашим кодом, и я настоятельно рекомендую вам пересмотреть, как вы выполняете этот вход в систему, иначе вам нужно отправить значение «true» со стороны сервера, чтобы вы могли протестировать его позже res.json(true) в вашем случае, после этого вы можете протестировать его с помощью res.data === true