如何将jwt令牌重定向到react中的身份验证登录

Question

我在后台使用spring实现spring安全性，在前端使用jwt实现安全性和React，当令牌过期或没有生成令牌时，它希望重定向到登录名，这就是我在验证中所做的。在这里，我向您展示了我在react 中使用函数而不是类执行重定向函数的部分

export default function Dashboard() {

function validateToken(){
fetch(endpoint,request)
.then(response => response.json())
.then(data => {
if(data.error==="Unauthorized"){
history.push("/")
}else{
setUserList(data);
}  
})}
return (
<div>
{validateToken}
</div>)

我这样做的话，如果它能工作，它会重定向，但在重定向之前，它会渲染页面的一部分数千秒，如果你注意它，你会看到它的外观和消失，这就是为什么我会在渲染之前向你寻求帮助，如果有任何方法可以执行该功能的话。

Answer 1

您可以维护一个状态加载。在上面函数的开头，将loading的值设置为true。在API的成功值或错误之后，将加载的值设置为false。

并根据加载的值，显示组件的渲染代码。

const [laoding, setLoading] = useState(false);
function validateToken() {
setLoading(true);
fetch(endpoint,request)
.then(response => response.json())
.then(data => {
setLoading(false);
if(data.error==="Unauthorized"){
history.push("/")
}else{
setUserList(data);
}  
})}
return {
<div>
{!loading && <Component />}
</div>
}

这样可以避免闪烁效果。