基于本地存储删除的React重新呈现身份验证路由

Question

我的react应用程序中有一个受保护的路由，当本地存储项被删除时，我需要它来监听。如果项目已删除，请返回登录页面。现在我只检查该项是否存在，但当本地存储项被删除时，它不会重新呈现组件。我试过使用像react-use-localstorage这样的库，但当项目被删除时，它不会通知我，只有当它被更改时才会通知我。这是文件：

const AuthRoute = ({ component: Component, ...rest }) => {
const [authToken] = useLocalStorage(AUTH_TOKEN);
return (
<Route
{...rest}
render={props =>
authToken ? (
<Layout>
<Component {...props} />
</Layout>
) : 
<Redirect
to={{
pathname: '/login',
}}
/>
)
}
/>
);
};

我之所以需要它来做这件事，是因为如果本地存储中什么都没有，那么在重定向到登录之前，组件仍然会快速渲染一秒钟。

编辑。这就是错误所在。在INTERNAL_SERVER_error的情况下是。我使用graphql来检查用户是否通过了身份验证。使用history.push('/login'(不会立即重定向我，它在重定向我之前会显示一个错误闪烁。

const client = new ApolloClient({
link: ApolloLink.from([
onError(({ graphQLErrors, operation, forward }) => {
if (graphQLErrors) {
graphQLErrors.forEach(err => {
console.log(err);
switch (err.extensions.code) {
case 'INTERNAL_SERVER_ERROR':
if (err.path && err.path[0] === 'updateToken') {
removeItem(AUTH_TOKEN);
// history.push('/login');
}
return forward(operation);
default:
return forward(operation);
}
});
}
}),
requestLink,
uploadLink,
]),
cache,
});

这是我处理围绕这个问题重定向时仅有的两个地方。当我在chrome中手动删除本地存储项目时，它会重定向我，但如果令牌过期，它会在重定向我之前首先显示一条快速错误消息。

Answer 1

您需要监听localStorage中的更改。像存储事件这样的事情应该能起到作用。您将收到一个事件，您可以检查您的AUTH_TOKEN是否仍存在于localStorage中。如果没有，您可以立即重新路由。

以下是MDN链接：https://developer.mozilla.org/en-US/docs/Web/API/Window/storage_event您必须为此创建一个新的挂钩，因为这是一个直接的web API。或者找一个包。