我正在尝试使用react-router-dom
和对每个路由更改的用户进行身份验证react hooks
。这个想法是,每次用户导航到一条路线时,系统都会进行 api 调用并对用户进行身份验证。我需要实现这一点,因为我使用react-redux
, 并且在每个窗口重新加载 redux 状态不会持久化。所以我需要再次设置isLoggedNow
propstrue
:
const PrivateRoute = ({
component: Component,
checkOnEachRoute: checkReq,
isUserLogged,
...rest
}) => {
const [isLoggedNow, setLogged] = useState(isUserLogged);
useEffect(
() => {
const fetchStatus = async () => {
try {
await selectisUserLogged();
setLogged(true);
} catch (error) {
console.log(error);
}
};
fetchStatus();
},
[isUserLogged],
);
return (
<Route
{...rest}
render={props =>
isLoggedNow ? (
<div>
<Component {...props} />
</div>
) : (
<Redirect
to={{
pathname: '/login',
}}
/>
)
}
/>
);
};
然后我会PrivateRoute
像这样使用上面的:
function App(props) {
return (
<div>
<Switch location={props.location}>
<Route exact path="/login" component={Login} />
<PrivateRoute exact path="/sidebar" component={Sidebar} />
</Switch>
</div>
);
}
首先是isUserLogged
is true
,但是在窗口重新加载后我收到一个错误Warning: Can't perform a React state update on an unmounted component.
那么我该如何实现这一点,所以在每个窗口重新加载时我都会对用户进行身份验证?我正在寻找某种componentWillMount
.