javascript - How can I protect routes in ReactJs?

Question

I am trying to protect my routes with reactjs and hooks. However there is an issue. The user and the token don't update even if make setUser() and setToken() with new values inside them. And it leads to the fact that I can't protect my route. So I hope someone can help me with this!!!

import React, { useState,useEffect} from 'react'
import { Redirect } from 'react-router-dom'

function ProtectedRoutes(props) {
    const [user, setUser] = useState({})
    const [token, setToken] = useState(null)
    const Component = props.component

    useEffect(() => {
        //
            const getUser = async () => {
        
                //Retreive Token
                const sessionToken = await sessionStorage.getItem('token')
                setToken(sessionToken)

                //Fetch User    
                const response = await fetch(`${process.env.REACT_APP_URL}api/users/me`, {
                    method: 'get',
                    headers: new Headers({
                        "x-auth-token": `${token}`
                    })
                })
                const result = await response.json();
                setUser(result)
                //
            
       }
        getUser()
        
        return ()=> {}
       
    },[token,user])
    
    //Token
    if (!token || Object.keys(user).length !== 2) {
        return <Redirect to={{ pathname: '/connexion' }} />
    }
    return <Component/>

}

export default ProtectedRoutes

question from:https://stackoverflow.com/questions/65909957/how-can-i-protect-routes-in-reactjs

Answer 1

Try something like this

import React from "react";
import { Redirect } from "react-router-dom";

const isAuthenticated = async () => {
  const sessionToken = sessionStorage.getItem("token");

  const response = await fetch(`${process.env.REACT_APP_URL}api/users/me`, {
    method: "get",
    headers: new Headers({ "x-auth-token": `${sessionToken}` })
  });
  const result = await response.json();

  return !!sessionToken && !!(Object.keys(result).length !== 2);
};

function ProtectedRoutes(props) {
  const Component = props.component;

  return isAuthenticated() ? (
    <Component />
  ) : (
    <Redirect to={{ pathname: "/connexion" }} />
  );
}

export default ProtectedRoutes;