Reactjs 句柄保护路由逻辑

我正在为我的react项目创建一个受保护的路由，但是上下文值和redux reducer数据不是持久的。因此，如果用户已登录，那么设置的最佳方式是什么，例如

isverify

到

true

。如果

isVerified===true

转到主页，否则重定向到登录，

isVerified

需要在路由或刷新中的每次更改都进行变异，因为上下文或重复数据不是持久的

我是否需要创建一个单独的后端api来检查来自客户端的令牌？然后我将在主

App.tsx

中添加一个useEffect，类似于：

useEffect(() => {
    /*make api call, and pass the token stored in the localStorage. If 
    verified success then: */
    setIsVerified(true)
}, [])

---

然后，我可以使用

isVerified

到我的受保护路由

您可以创建一个中间件组件来包装受保护和非受保护的组件路由。在每一个页面中，只需检查用户是否已登录，然后有条件地进行渲染

这通常是我实现的方式

受保护：

//AuthRoute.js
从“React”导入React，{useffect，useState}；
从“react router dom”导入{Redirect，Route}；
export const AuthRoute=（{exact=false，path，component}）=>{
const[isVerified，setIsVerified]=使用状态（false）；
常量checkLoginSession=（）=>{
//在这里写下你的验证逻辑
const loggedUser=window.localStorage.getItem（“accessToken”）| |“”；
返回loggedUser！==“”？真：假；
};
useffect（（）=>{
（异步函数（）{
const sessionState=等待checkLoginSession（）；
返回设置已验证（会话状态）；
})();
}, []);
退货确认了吗(
) : (
);
};

不受保护：

从“React”导入React；
从“react router dom”导入{Redirect，Route}；
从“react”导入{useffect，useState}；
导出常量Nauthoute=（{exact=false，path，component}）=>{
const[isVerified，setIsVerified]=使用状态（false）；
常量checkLoginSession=（）=>{
//在这里写下你的验证逻辑
const loggedUser=window.localStorage.getItem（“accessToken”）| |“”；
返回loggedUser！==“”？真：假；
};
useffect（（）=>{
（异步函数（）{
const sessionState=等待checkLoginSession（）；
返回设置已验证（会话状态）；
})();
}, []);
退货确认了吗？
: ;
};