我正在尝试使用 reactjs 和 hooks 来保护我的路由。然而,有一个问题。即使在 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
答案 0 :(得分: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;