使用React进行身份验证

Question

我正在做一个项目，前端使用React，后端使用Django。我在React中使用useState函数来处理isConnected变量。我现在的问题是，isConnected采取初始值每当我刷新我的网页，这是假的，这是我的代码:

const [isConnected, setIsConnected] = useState(false)
useEffect( async () => {
async function checkJWTValidity(){
try{
axios.defaults.headers.post['Authorization'] = "JWT "+localStorage.getItem("token")
//fetching ME data from API
const requestdata = await axios.post(
utils.endpoint,{query: utils.meQuery}
)

//checking if the returned Data is NULL, if so, tokens would be deleted from localStorage.
//else token variables will remain for its still valid.
if(requestdata.data.data.me === null){
const tokenItems = await getNewJWT(localStorage.getItem("refreshToken"))
if(tokenItems.length === 0){
localStorage.removeItem("token")
localStorage.removeItem("refreshToken")
setIsConnected(false)
console.log("null")
}
else{
localStorage.setItem("token", tokenItems[0])
localStorage.setItem("refreshToken",  tokenItems[1])
setIsConnected(true)
}
}
else{
console.log(isConnected)
setIsConnected(true)
}
}
catch(err){
console.log(err)
}
}

async function getNewJWT(refreshToken){
const token = []
try{
//fetching refreshToken data from API
const requestdata = await axios.post(
utils.endpoint,
{
query: utils.refreshQuery(refreshToken)
}
)

//checking if the returned Data is NULL, if so, tokens would be deleted from localStorage.
//else token variables will remain for its still valid.

if(requestdata.data.data.refreshToken.errors === null){
token.push(requestdata.data.data.refreshToken.token.toString())
token.push(requestdata.data.data.refreshToken.refreshToken.toString())
}

}
catch(err){
console.log(err)
}
return token
}

checkJWTValidity();
}, [])

如果有最优解，请告诉我!由于

Answer 1

每当刷新浏览器页面时，你的组件树和状态都会重置为初始状态。

要在浏览器中重新加载页面后保持以前的状态，您需要执行以下任何操作

1. 将状态本地保存到localStorage或IndexedDB
2. 或在服务器端重新加载

您需要在初始化时添加代码来检查先前保存的本地状态或服务器状态，这样您就可以恢复您之前的状态。

Answer 2

如果您有依赖于令牌有效性的子组件，则可以在isConnected为假时阻止进一步呈现。这样可以给令牌时间来刷新或确认。

const Auth = ({children}) => {
const [isConnected, setIsConnected] = useState(false);
useEffect(async () => {
if (!isConnected) {
async function checkJWTValidity() {
// ...
}
}
}, [isConnected]);
return isConnected ? children : null;
};

我还将isConnected值添加到依赖数组中，并在useEffect中放入if语句。

无论时间有多短，总会有一个使用默认状态的时间点。这是javascript和web应用程序的本质。