Question

我的应用程序中有一条受保护的路由，当本地存储项被删除时，我需要它来监听。如果该项目被删除，请返回登录页面。现在，我只是检查项目是否存在，但是当删除本地存储项目时，它不会重新呈现组件。香港专业教育学院曾尝试使用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,
});

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

Answer 1

您需要收听localStorage中的更改。诸如存储事件之类的方法应该可以解决问题。您将收到一个事件，您可以检查您的AUTH_TOKEN是否仍在localStorage中。如果没有，您可以立即重新路由。

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

根据本地存储删除反应重新渲染身份验证路由

1 个答案: