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

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

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

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

1 个答案: