React express jwt, Where to call the api to check if a user if logged in-CodePudding

This is how I redirect a user depending if he is logged in or not. I am just checking if there is a cookie or not in this example.

  import { Route, Redirect } from "react-router-dom";
  import cookies from "js-cookies";

  export const PrivateRoute = ({ children, ...rest }) => {
    const userSignedIn = () => {
    return cookies.getItem("jwt");
  };

  return (
    <Route
      {...rest}
      render={({ location }) =>
        userSignedIn() ? (
          children
        ) : (
          <Redirect to={{ pathname: "/login", state: { from: location } }} />
        )
      }
    ></Route>
  );
};

I am trying to improve my code by checking if a user is logged in with my backend.

What is the proper way to check if a user is logged in with react express and JWT ? Where should I call my api ?

I have been stuck with this problem for a while now...

Thanks

CodePudding user response：

When you logged in then you set a variable auth true in global state and set localstorage.setItem("auth", true) as like. You need to understand about private route and public route and define private route and public route, when you logged in then get auth true then call private route otherwise call public route.In this time you set again global state from localstorage.getItem("auth") because when you reload this page then auth variable true get in localstorage, hope you understand thanks

CodePudding user response：

So this is how I solved my question.

Might not be the best...

import { Route, Redirect } from "react-router-dom";
import { useEffect, useState } from "react";
import { Loading } from "../Loading/Loading";
import axios from "axios";

export const PrivateRoute = ({ children, isAuthenticated, ...rest }) => {
const [isLoading, setIsLoading] = useState(true);
const [isAuth, setIsAuth] = useState(false);

const getIsAuthenticated = async () => {
  try {
    const res = await axios.get("http://localhost:5000/api/user");

    console.log(res);
    setIsAuth(true);
  } catch (error) {
    console.log(error);
    setIsAuth(false);
  }
  setIsLoading(false);
};

useEffect(() => {
  getIsAuthenticated();
  return () => {};
}, [isAuth]);

if (isLoading) {
  return <Loading />;
}

return (
  <Route
    {...rest}
    render={({ location }) =>
      isAuth ? (
        children
      ) : (
        <Redirect to={{ pathname: "/login", state: { from: location } }} />
      )
    }
  ></Route>
);
};

backend code

const user_GET = async (req, res) => {
  res.status(400).send("wrong token");
  //res.status(200).send("right token");// DEBUG
};