Question

我有一条授权的路由，该路由不应允许用户未经登录即访问受保护的路由。但是，当我在上下文中对用户进行身份验证之后使用重定向时，将在登录和管理之间发生无限循环。只需将链接始终从login更改为admin。

错误

Error: Maximum update depth exceeded. This can happen when a component repeatedly calls setState inside componentWillUpdate or componentDidUpdate. React limits the number of nested updates to prevent infinite loops.

授权路线

const { user } = useAuthState();
  console.log('user in Authrized route', user);
  if (user) {
    return <Route {...props} />;
  }

return <Redirect to={ROUTES.LOGIN} />;

在登录组件中重定向

if (isAuthorized) {
    return <Redirect to="/admin" />
}

具有上下文的AuthController

export const AuthController = ({ children }: { children: React.ReactNode }) => {
  const [state, dispatch] = useReducer(authReducer, {
    isAuthorized: false,
    isAuthorizing: false,
    user: undefined,
  });
  useEffect(() => {
    firebase.auth().onAuthStateChanged((user) => {
      dispatch(setAuthorized(user as any));
    })
  }, [state.isAuthorizing])

  if(state.isAuthorizing) {
    return <Spinner />
  }

  return <AuthDispatchContext.Provider value={dispatch}>
    <AuthStateContext.Provider value={state}>
      {children}
    </AuthStateContext.Provider>
  </AuthDispatchContext.Provider>
}

Answer 1

如果我理解正确，那么会有一个需要登录的路径和授权。

如果未登录->重定向到ROUTES.LOGIN。
如果已记录并具有授权->提供内容。
如果已记录并且没有授权-> 401

对于第三种情况，您应该返回404 Not Found或401 Unauthorized响应。有了这种逻辑，就不应有任何循环。

使用重定向反应路由器无限路由循环

1 个答案: