如何保护 ReactJs 中的路由？

Posted 2023-02-21

【中文标题】如何保护 ReactJs 中的路由？

【英文标题】：How can I protect routes in 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_URLapi/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

【参考方案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_URLapi/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;