I'm trying to validate login using a local json file, by fetching data using axios and setting state in class components. I'm unable to validate and route to the home page after login.

import { Component, React } from "react";
import bootstrap from "bootstrap/dist/css/bootstrap.css";
import { Link } from "react-router-dom";
import axios from "axios";
import Navigation from "./Navigation";

var users;
var validUsername;
var validPassword;

export default class Login extends Component {
    
    constructor(props) {
        super(props);
        this.state = {
            users: [{
                id: "",
                role: "",
                username: "",
                password: "",
                status: "",
                security_question: "",
                security_answer: ""
            }],
            plans:  [
                {
                  id: "",
                  package: "",
                  status: "",
                  data_in_gb: "",
                  monthly_charge: "",
                  charge_after_limit: ""
                }
              ]
        }
    }

    componentDidMount() {
        axios.get("../db.json").then(response => {
            this.setState({
                users: response.data.users,
                plans: response.data.plans
            });
            users = response.data.users;
        });
    }

    
    render() {
        return (
            <>
            <Navigation />

            <form>
                <table className="table text-center">
                    <thead>
                        <tr>
                            <th>Login</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            Username
                        </tr>
                        <tr>
                            <input type={"text"} onChange={validateUsername}></input>
                        </tr>
                        <tr>
                            Password
                        </tr>
                        <tr>
                            <input type={"password"} onChange={validatePassword}></input>
                        </tr>
                    </tbody>
                </table>
                <div className="text-center">
                    <Link to="/home"><button type={"submit"} onClick={validateLogin}>Login</button></Link>
                    <p id="error"></p>
                </div>
            </form>
            </>
        )
    }
}

function validateLogin() {
    if (validUsername && validPassword ) {
        // eslint-disable-next-line no-restricted-globals
        history.push("/home");
    }
}
var index = -1;
function validateUsername(event) {
    validUsername = false;
    for (let i = 0; i < users.length; i  ) {
        if (users[i].username == event.target.value) {
            index = i;
            validUsername = true;
        } 
    }
}

function validatePassword(event) {
        if (users[index].password == event.target.value) {
            validPassword = true;
        } else {
            validPassword = false;
        }
}

I'm trying to navigate user to home page after successful login validation, using local json file for login credentials. I'm unable to route to home page, as the link I provide to submit button directly lands me to the home page.

CodePudding user response：

Make a context and wrap the index.js. Use auth and add them at the route level

  <div className="App">
    <BrowserRouter>
      {authStatus && <Navbar />}
      <Routes>
          {!authStatus && <Route path="/*" element={<Login />} />}
            {authStatus && <>
          <Route path="/" element={<DashBoard />} />
          <Route path="/batch" element={<Batch />} />
          <Route path="/users" element={<Users />} />
          <Route path="/task" element={<Task />} />
        </>
        }
      </Routes>
   </BrowserRouter>
 </div>

CodePudding user response：

Issues

You are directly wrapping the submit button with the Link component which immediately will navigate to "/home" upon being clicked.

Solution

I suggest making the following changes.

1. Move the "Login" button's onClick handler to the form element's onSubmit handler and prevent the default for action from being taken.
2. Add an onClick handler to the Link component to prevent the link's default action from occurring, i.e. prevent immediately navigating.

import { Component, React } from "react";
import bootstrap from "bootstrap/dist/css/bootstrap.css";
import { Link } from "react-router-dom";
import axios from "axios";
import Navigation from "./Navigation";

var users;
var validUsername;
var validPassword;

export default class Login extends Component {
  ...
    
  render() {
    return (
      <>
        <Navigation />

        <form onSubmit={validateLogin}>
          <table className="table text-center">
            <thead>
              <tr>
                <th>Login</th>
              </tr>
            </thead>
            <tbody>
              <tr>Username</tr>
              <tr>
                <input type={"text"} onChange={validateUsername} />
              </tr>
              <tr>Password</tr>
              <tr>
                <input type={"password"} onChange={validatePassword} />
              </tr>
            </tbody>
          </table>
          <div className="text-center">
            <Link to="/home" onClick={e => e.preventDefault()}>
              <button type="submit">Login</button>
            </Link>
            <p id="error"></p>
          </div>
        </form>
      </>
    );
  }
}

function validateLogin(event) {
  event.preventDefault();

  if (validUsername && validPassword ) {
    // eslint-disable-next-line no-restricted-globals
    history.push("/home");
  }
}

...