Javascript react-react路由器-专用路由-无限循环

我试图在我的单页应用程序中创建一个简单的身份验证系统。 我想为来宾禁用所有路由execpt

/login

。 知道用户是经过身份验证的还是来宾的方法是知道

localStorage

中是否有

access\u令牌

当我启动应用程序时，
Main
组件启动。组件通过检查
localStorage
来定义路由并知道用户是否经过身份验证

默认路由（
/
）用于呈现
主路由
组件，但与反应路由器类似，
主路由
组件由
私有路由
对象保护

privaterout
对象检查用户是否经过身份验证。如果是，则呈现
主页
组件，否则用户将重定向到
登录
组件的
/login

登录
组件在成功的情况下将用户重定向到
/
，并执行回调以提供
访问令牌

Main
组件定义回调，它将在
localStorage
中保存
access\u令牌
，并更改
状态
，以声明用户已验证。现在，用户可以访问
Home
组件

 handleSubmit(event) {
...

.then((response) => {
            let token = response.data.access_token;
            this.setState({
                redirect: true,
                token: token,
                loading: false
            });
           // here, call the handle from props
           this.props.handleLogin(token);
        }

...

我的问题是，
PrivateRoute
系统总是将用户作为来宾进行检查，因此它总是重定向到
/login
。但是当在
localStorage
中是
access\u令牌时，
Login
组件重定向到受
privaterout
保护的
Home
，这是一个内场循环，尽管有
handleLogin
回调

你能找到解决办法吗


Main.jsx

import React，{Component}来自'React'；
从“react dom”导入react dom；
从“react router dom”导入{BrowserRouter，Link，Redirect，Route}；
从“/Login”导入{Login}
从“/Home”导入{Home}；
类主扩展组件{
建造师（道具）{
超级（道具）；
this.handleLogout=this.handleLogout.bind（this）；
this.handleLogin=this.handleLogin.bind（this）；
this.state={authed:localStorage.getItem（'access_token'）！==null}；
}
componentDidCatch（错误，信息）{
}
handleLogout（事件）{
event.preventDefault（）；
localStorage.removietem（'access_token'）；
this.setState（{authed:false}）；
}
handleLogin（令牌）{
setItem（'access_token'，token）；
this.setState（{authed:token！==null}）；
}
render（）{
const privaterout=（{component:component，…rest}）=>(
this.state.authed（）
? ()
: ()
}
/>
);
const LoginLogout=（）=>{
返回this.state.authed
？（注销）
：（登录）；
};
返回(


家




}/>
);
}
}
if（document.getElementById（'main'））{
ReactDOM.render（，document.getElementById（'main'））；
}

Login.jsx

import React，{Component}来自'React'；
从“react router dom”导入{Redirect}；
导出类登录扩展组件{
建造师（道具）{
超级（道具）；
此.state={
电子邮件：“”，
密码：“”，
重定向：localStorage.getItem（'access_token'）！==null，
令牌：null，
加载：false，
错误：null
};
this.handleInputChange=this.handleInputChange.bind（this）；
this.handleSubmit=this.handleSubmit.bind（this）；
}
组件将卸载（）{
this.props.handleLogin（this.state.token）；
}
handleInputChange（事件）{
const target=event.target；
const value=target.type=='checkbox'？target.checked:target.value；
const name=target.name；
这是我的国家({
[名称]：值
});
}
handleSubmit（事件）{
event.preventDefault（）；
这是我的国家({
错误：null，
加载：正确
});
axios.post（“/api/login”{
“客户id”：“3”，
“电子邮件”：this.state.email，
“密码”：this.state.password，
“确认密码”：this.state.password
})。然后（（响应）=>{
let token=response.data.access\u token；
这是我的国家({
重定向：对，
令牌：令牌，
加载：错误
});
}，（错误）=>{
console.error（'error'，error.response.data）；
这是我的国家({
错误：error.response.data，
加载：错误
});
});
}
render（）{
if（this.state.redirect）
返回（）；
返回(
电邮：
密码：
{this.state.loading？”…：“Se连接器”}
{this.state.error&&(
Erreur:{JSON.stringify（this.state.error）}

)}
);
}
}
在
handleSubmit
函数中，需要从props调用
handleLogin
，以便在容器组件中正确更新状态

 handleSubmit(event) {
...

.then((response) => {
            let token = response.data.access_token;
            this.setState({
                redirect: true,
                token: token,
                loading: false
            });
           // here, call the handle from props
           this.props.handleLogin(token);
        }

...

这样，您的
this.state.authed
将具有适当的值
我认为在您的登录中，在getti之后的handleSubmit中