如何保护 ReactJs 中的路由？答案

【问题标题】：How can I protect routes in ReactJs?如何保护 ReactJs 中的路由？
【发布时间】：2021-04-30 17:53:09
【问题描述】：

我正在尝试使用 reactjs 和钩子来保护我的路线。但是有一个问题。即使在 setUser() 和 setToken() 中使用新值，用户和令牌也不会更新。这导致我无法保护我的路线。所以我希望有人能帮我解决这个问题！！！

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

【问题讨论】：

标签： javascript reactjs react-hooks jsx

【解决方案1】：

试试这样的

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;

【讨论】：