Checking if a user is logged in to use features on other pages

Question

I have connected to an API to make users log in if they have an account. However, I have other pages which I want them to be logged in in order to use. How would I check to make sure a certain user is logged in to use certain features? Is there any source someone can guide me to? Any help would be appreciated.

Thanks,

import React, { useState, useEffect } from "react";
import ForgotPassword from "./ForgotPassword";
import TermsOfService from "./TermsOfService";
import axios from "axios";

function Login() {
  const [user, setUser] = useState("");
  const [userName, setUserName] = useState("");
  const [password, setPassword] = useState("");

  function handleLogin() {
    var config = {
      method: "post",
      url: "http://localhost:8080/api/account/login",
      data: {
        username: userName,
        password: password,
      },
    };

    axios(config)
      .then(function (response) {
        setUser(response.data);
        localStorage.setItem("user", JSON.stringify(response.data));
        console.log(response.data);
      })
      .catch(function (error) {
        console.log(error);
      });
  }
  return (
    <>
      <Navbar />
      <div className="login_form">
        <input
          className="form_input"
          type="text"
          placeholder="Username or Email"
          onChange={(e) => setUserName(e.target.value)}
        />

        <input
          className="form_input"
          type="password"
          placeholder="Password"
          onChange={(e) => setPassword(e.target.value)}
        />

        <button type="submit" onClick={handleLogin} className="Signup_button">
          Login
        </button>
      </div>
    </>
  );
}

export default Login;