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

我的react应用程序中有一个受保护的路由，我需要它在localstorage项目被删除时进行侦听。如果项目已删除，请返回登录页面。现在我只是检查该项是否存在，但在删除localstorage项时它不会重新呈现组件。我尝试过使用库，如

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',
              }}
            />
        )
      }
    />
  );
};

---

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

您需要监听localstorage中的更改。像存储事件这样的事情应该可以做到这一点。您将收到一个事件，您可以检查您的身份验证令牌是否仍然存在于本地存储中。如果没有，您可以立即重新布线

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,
});

以下是此的MDN链接：

---

您必须为此创建一个新的钩子，因为这是一个直接的web API。或者为此找到一个包。

您能提供完整的代码示例吗？听起来像是在设置localstorage，但在渲染时钩子中的状态尚未更新。如果您提供详细信息，我们可以找出逻辑差距在哪里。当我在chrome中删除localstorage项时，它会重定向我，但如果令牌过期，它会首先显示一条快速错误消息，然后重定向me@jack.benson我在编辑中添加了代码我添加了一个工作示例，其中包含了您在此处发布的内容。你能不能添加一些细节，这样我们就可以复制你的功能@杰克·本森那和我的差不多我做了些改变