React JS 从 api 获取数据

Question

Why i can't post data to api my booking? the error code is index.js:40 POST https://gotravel-production.up.railway.app/api/v1/booking 401

this my login page code:

import React, { useState, useEffect } from "react";
import "bootstrap/dist/css/bootstrap.min.css";
import Container from "react-bootstrap/Container";
import NavbarHeader from "../Header/Navbars";
import { Navigate } from "react-router-dom";
import { GoogleLogin, GoogleOAuthProvider } from "@react-oauth/google";
import jwtDecode from "jwt-decode";

async function doLogin({ username, password }) {
  // Gunakan endpoint-mu sendiri
  const response = await fetch(
    "https://gotravel-production.up.railway.app/api/v1/login",
    {
      method: "POST",
      headers: {
        "Content-Type": "application/json",
      },
      body: JSON.stringify({
        username,
        password,
      }),
    }
  );
  const data = await response.json();
  return data.token;
}

async function doLoginGoogle(res, email) {
  // Gunakan endpoint-mu sendiri
  const response = await fetch(
    "https://gotravel-production.up.railway.app/api/v1/google",
    {
      method: "POST",
      headers: {
        "Content-Type": "application/json",
      },
      body: JSON.stringify({
        email,
        token: res,
      }),
    }
  );
  const data = await response.json();
  console.log(data);
  return data.accessToken;
}

function Login() {
  const [username, setUsername] = useState("");
  const [password, setPassword] = useState("");
  const [error, setError] = useState("");
  const [isLoggedIn, setIsLoggedIn] = useState(false);
  const [isLoading, setIsLoading] = useState(false);
  const token = localStorage.getItem("token");
  const GOOGLECLIENTID =
    "1075166577960-u21r9932mfr51s1uiq3mbc5v5k15uu96.apps.googleusercontent.com";

  useEffect(() => {
    setIsLoggedIn(!!token);
  }, [token]);

  function handleSubmit(e) {
    setIsLoading(true);
    e.preventDefault();
    doLogin({ username, password })
      .then((user) => {
        if (!user) {
          setError(user.message);
        } else {
          localStorage.setItem("token", user);
        }
      })
      .catch((err) => err.message)
      .finally(() => setIsLoading(false));
  }

  const haldleSuccessGoogle = (response) => {
    const userData = jwtDecode(response.credential);
    // const response = await fetch("https://challenge-8-be-fsw-production.up.railway.app/api/v1/google"
    if (response.credential) {
      doLoginGoogle(response.credential, userData.email)
        .then((token) => {
          if (!token) {
            setError("TOKEN TIDAK ADA");
          } else {
            localStorage.setItem("token", token);
            setIsLoggedIn(token);
          }
        })
        .catch((err) => err.message)
        .finally(() => setIsLoading(false));
    }
  };

  // function handleLogout(e) {
  //   setIsLoading(true);
  //   e.preventDefault();
  //   localStorage.removeItem("token");
  //   setIsLoggedIn(false);
  //   setIsLoading(false);
  // }

  return (
    <div className="bgLogin">
      <NavbarHeader />
      <br />
      <br />
      <Container>
        <div className="row">
          <div className="col-7"></div>
          {!isLoggedIn ? (
            <div className="col-5">
              <h2>Masuk</h2>
              <p>
                Belum punya akun? <a href="/register">Daftar disini</a>
              </p>
              <form onSubmit={handleSubmit}>
                <div className="mb-3 h6">
                  <label htmlFor="username" className="form-label">
                    Username
                  </label>
                  <input
                    type="text"
                    className="form-control bg-transparent formInput"
                    id="username"
                    onChange={(e) => setUsername(e.target.value)}
                    value={username}
                    placeholder="your username"
                  />
                </div>
                <div className="mb-3 h6">
                  <label htmlFor="passwd" className="col-sm-2 col-form-label">
                    Password
                  </label>
                  <input
                    type="password"
                    className="form-control bg-transparent formInput"
                    id="password"
                    onChange={(e) => setPassword(e.target.value)}
                    value={password}
                    placeholder="your password"
                  />
                </div>
                <a href="/" className="forgot">
                  Back to the site
                </a>
                <br />
                <br />
                <div className="d-grid gap-2">
                  <input
                    type="submit"
                    value={isLoading ? "Loading" : "Login"}
                  />
                </div>
                <p>Atau masuk dengan</p>
                <div className="d-grid gap-2">
                  <GoogleOAuthProvider clientId={GOOGLECLIENTID}>
                    <GoogleLogin
                      buttonText="Login with Google"
                      onSuccess={(res) => {
                        haldleSuccessGoogle(res);
                      }}
                      onError={() => {
                        haldleSuccessGoogle("Error");
                      }}
                      cookiePolicy={"single_host_origin"}
                    />
                  </GoogleOAuthProvider>
                </div>
              </form>
            </div>
          ) : (
            <Navigate to="/" />
          )}
        </div>
      </Container>
    </div>
  );
}

export default Login;

and this is my booking page code:

import React, { useEffect, useState } from "react";
import "bootstrap/dist/css/bootstrap.min.css";
import Header from "../Header";
import Footer from "../Footer";
import { Container } from "react-bootstrap";
import { useLocation } from "react-router-dom";
import { Link } from "react-router-dom";

const BayarTiket = () => {
  const location = useLocation();
  const dataBooking = location.state;
  console.log(dataBooking);
  const [flight, setflight] = useState([]);
  const [user, setUser] = useState([]);

  useEffect(() => {
    fetch("https://gotravel-production.up.railway.app/api/v1/flight")
      .then((response) => response.json())
      .then((data) => {
        setflight(data.data.flights);
        console.log(data.data.flights);
      })
      .catch((err) => {
        console.log("err", err);
      });
    fetch("https://gotravel-production.up.railway.app/api/v1/profile")
      .then((response) => response.json())
      .then((data) => {
        setUser(data);
        console.log(data);
      })
      .catch((err) => {
        console.log("err", err);
      });
  }, []);
  console.log(user);

  async function booking() {
    // Gunakan endpoint-mu sendiri
    const response = await fetch(
      "https://gotravel-production.up.railway.app/api/v1/booking",
      {
        method: "POST",
        headers: {
          "Content-Type": "application/json",
        },
        body: JSON.stringify({
          id_flight: `${dataBooking.data.item.id_plane}`,
          baggage: `${dataBooking.baggageWeight}`,
          food: `${dataBooking.typeFood}`,
          name: `${dataBooking.name}`,
          homephone: `${dataBooking.homePhone}`,
          mobilephone: `${dataBooking.mobilePhone}`,
          totalprice: `${dataBooking.data.item.price}`,
        }),
      }
    );
    const data = await response.json();
    return data;
  }
  return (
    <div className="bayarTiket">
      <Header />
      <Container>
        <div className="row" style={{ paddingTop: "10px" }}>
          <div className="col-lg-12" key={dataBooking.data.item.id}>
            <nav
              className="navbar navbar-expand-lg"
              style={{ backgroundColor: "#4E4E4E" }}
            >
              <div className="container-fluid row">
                <div className="col-lg-7">
                  <a
                    className="navbar-brand"
                    href="#/"
                    style={{ color: "#FFFFFF" }}
                  >
                    Booking
                  </a>
                </div>
                <div className="col-lg-2">
                  <a
                    href="#/"
                    className="nav-link"
                    style={{ color: "#FFFFFF" }}
                  >
                    Pilih Tiket
                  </a>
                </div>
                <div className="col-lg-2">
                  <a
                    href="#/"
                    className="nav-link"
                    style={{ color: "#FFFFFF" }}
                  >
                    Pesanan Tiket
                  </a>
                </div>
                <div className="col-lg-2">
                  <a
                    href="#/"
                    className="nav-link active"
                    style={{ color: "#FFFFFF" }}
                  >
                    Bayar
                  </a>
                </div>
              </div>
            </nav>
            <h2 style={{ marginTop: "40px" }}>
              <img
                src="assets/img/park-tickets-couple 1.png"
                alt="tiket"
                style={{ paddingRight: "15px" }}
              />
              Metode Pengiriman
            </h2>
            <section style={{ marginLeft: "60px", paddingLeft: "15px" }}>
              <h3>Tiket Elektronik</h3>
              <p>
                Inilah cara hemat waktu dan tanpa kertas untuk bepergian. Anda
                akan menerima referensi tiket elektronik melalui e-mail.
              </p>
              <p>{dataBooking.data.item.id_plane}</p>
              <p>{dataBooking.data.available_seats}</p>
              <p>{dataBooking.baggageWeight}</p>
              <p>{dataBooking.typeFood}</p>
              <p>{dataBooking.name}</p>
              <p>{dataBooking.homePhone}</p>
              <p>{dataBooking.mobilePhone}</p>
              <p>{dataBooking.data.item.price}</p>
            </section>
            <h2 style={{ paddingTop: "20px" }}>
              <img
                src="assets/img/card.png"
                alt=""
                style={{ paddingRight: "15px" }}
              />
              Pembayaran
            </h2>
            <div
              style={{
                textAlign: "center",
                width: "1050px",
                height: "70px",
                marginLeft: "70px",
                backgroundColor: "#9f9f9f",
                borderRadius: "8px",
              }}
              className="tbayar"
            >
              <p style={{ paddingTop: "20px" }}>
                Jumlah yang harus di bayar adalah IDR{" "}
                {dataBooking.data.item.price * dataBooking.data.dataForm.capacity}
              </p>
            </div>
            <section style={{ marginLeft: "60px", paddingLeft: "15px" }}>
              <h3>Pembayaran Online</h3>
              <p>
                Pembayaran Online Anda akan dialihkan ke halaman eksternal bila
                mengklik tombol Konfirmasi perjalanan. Metode pembayaran yang
                tersedia antara lain:
              </p>
              <ul>
                <li>
                  <p>Internet Banking</p>
                </li>
                <li>
                  <p>Kartu Kredit (Visa, Master, JCB)</p>
                </li>
                <li>
                  <p>Kartu Debit</p>
                </li>
              </ul>
            </section>
            <button
              className="btn_bayar"
              onClick={booking}
              style={{
                borderRadius: "26px",
                width: "250px",
                height: "50px",
                marginLeft: "450px",
                color: "#ffff",
              }}
            >
              Bayar
            </button>
          </div>
        </div>
      </Container>
      <br />
      <br />
      <Footer />
    </div>
  );
};

export default BayarTiket;

idk why my token is not readable. Help me master

idk why my token is not readable. Help me master idk why my token is not readable. Help me master idk why my token is not readable. Help me master idk why my token is not readable. Help me master idk why my token is not readable. Help me master idk why my token is not readable. Help me master

idk why my token is not readable. Help me master

idk why my token is not readable. Help me master

idk why my token is not readable. Help me master

idk why my token is not readable. Help me master

idk why my token is not readable. Help me master

idk why my token is not readable. Help me master

Answer 1

In your Login, localStorage.getItem is asynchronous and will be "undefined" if you don't await the the results. You can replace the line:

const token = localStorage.getItem("token");

...with:

const [token, setToken] = useState(null);
(async () => {
const result = await localStorage.getItem("token");
setToken(result);
})();

I am not sure that this is your only issue, but this should retrieve "token" from Local Storage if it is there.