[英]Create a protected react route
我创建了一个组件,用于检查用户是否已登录,如果未登录,则返回“/login”路由。 测试组件时,它返回以下消息:
错误:对象作为 React 子对象无效(找到:[object Promise])。 如果您打算渲染一组子项,请改用数组。
这是我的路线
<Route exact path="/protected" render={ProtectedRoute}/>
受保护的组件
const ProtectedRoute = ( props ) =>
{
return Sesion.IsUserLogged(props)
.then( res =>
{
if(res)
return <Redirect to="/login" />
else
return <h2>This is my protected route</h2>
})
}
// Sesion script
class Session
{
IsUserLogged()
{
let cookie = this.GetSessionCookie();
if( cookie === undefined)
return false;
return this.ValidateUserSession(cookie);
}
ValidateUserSession(cookie)
{
return axios.post("http://localhost:3535/api/auth/validate", cookie)
.then( function (res)
{
return true;
})
.catch( function(err)
{
this.RemoveSessionCookies( );
return false
})
}
GetUserInfo()
{
let cookie = this.GetSessionCookie();
return axios.get(`http://localhost:3535/api/usrinfo/${cookie.UserID}`)
.then( function (res)
{
return res.data;
})
.catch( function(err)
{
if (err.response)
{
return undefined;
}
})
}
RemoveSessionCookies( )
{
let COOKIE_NAME = Config.SesionCookieName;
const cookie = new Cookies();
cookie.remove(COOKIE_NAME);
}
GetSessionCookie()
{
let COOKIE_NAME = Config.SesionCookieName;
const cookie = new Cookies();
return cookie.get(COOKIE_NAME);
}
}
嗯,有人可以帮我吗?
我想你可以试试这个:
const ProtectedRoute = ( props ) => {
const [isLogged, setIsLogged] = React.useState(false);
const [isInitialized, setIsInitialized] = React.useState(false);
React.useEffect(() => {
if(!Sesion.IsUserLogged) {
setIsLogged(false)
setIsInitialized(true);
}
Sesion.IsUserLogged(props).then( res => {
setIsLogged(!!res)
setIsInitialized(true);
});
return () => {}
});
if(!isInitialized) {
return null;
}
if(!isLogged) {
return <Redirect to="/login" />
}
return (<h2>This is my protected route</h2>)
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.