ReactJS - 基于 api 调用响应的受保护路由

Question

我正在尝试使用 API 端点实现受保护的路由，但与渲染相比，响应速度较慢。
结果，我的 localStorage 中有正确的数据，但 react 从来没有按时使用它们。

我正在使用 localStorage 来保存我的 API 身份验证响应以及初始状态和一个调度程序来更新我在整个应用程序中的状态。

我从上到下做了什么：

初始状态：

export default {
  auth: {}
};  

App.js

const App = () => {
  const [data, dispatch] = useReducer(reducer, initialState);
  
  useEffect(() => {
    asyncStorage.getItem('data').then((storage) => {
      dispatch({ type: "PERSIST_DATA", payload: JSON.parse(storage) });
    });
  }, []);

  useEffect(() => {
    asyncStorage.setItem('data', JSON.stringify(data));
  }, [data]);
  
  return <Router data={data} dispatch={dispatch} />;
};

Router.js

export default function Router({data, dispatch}) {
  
  return (
    <ProvideAuth data={data} dispatch={dispatch}>
      <BrowserRouter>
        <Switch>
            <PrivateRoute path="/" data={data} dispatch={dispatch}>
              <Home data={data} dispatch={dispatch} />
            </PrivateRoute>
            <Route path="/sign-in" render={() => <Signin data={data} dispatch={dispatch} /> } />
          </Switch>
      </BrowserRouter>
    </ProvideAuth>
  )

} 

function PrivateRoute({ children, ...rest }) {
  const auth = useAuth()
  
  return (
    <Route {...rest} render={({ location }) =>
        auth.loggedIn ? (children) :
        (<Redirect to={{ pathname: '/sign-in', state: { from: location } }} />)
      }
    />
  )
}

Auth.js

const authContext = createContext();

export function ProvideAuth({ children, data, dispatch }) {
  const auth = useProvideAuth(data, dispatch)
  return <authContext.Provider value={auth}> { children } </authContext.Provider>
}

export const useAuth = () => useContext(authContext);

function useProvideAuth(data, dispatch) {
  const [loggedIn, setLoggedIn] = useState(null);
  
  useEffect(() => {
    auth
      .me(dispatch)
      .then(() => {
        setLoggedIn(true);
      })
      .catch(() => {
        setLoggedIn(false)
      });
  }, [])

  return {
    loggedIn
  }

}

auth.me

export function me(dispatch) {
  return api
    .me()
    .then((response) => {
      dispatch({ type: "UPDATE_AUTH", payload: response });
    })
    .catch((error) => {
      throw error;
    });
}

我觉得我快到了，但我可能遗漏了一些明显的东西。

Answer 1

没有 1：我相信，您在 App.js 中的第二个 useEffect 可能会几乎每秒运行一次，因为没有指定依赖数组，这可能会影响您期望的更新，因为组件会一直挂载

No 2：我不知道 Auth.js 中的 auth.me(dispatch) 是做什么的，所以可能很难推断