react router dom v6 private route with axios

Question

I have App.js only contains route:

function App() {
  return (
    <BrowserRouter>
      <Routes>
        <Route element={<Login />} path="/login"></Route>
        <Route element={<NotFound />} path="*"></Route>
        <Route element={<PrivateRoutes />}>
          <Route element={<Home />} path="/"></Route>
        </Route>
      </Routes>
    </BrowserRouter>
  );
}

And my PrivateRoute.js is

function PrivateRoutes() {
    const key = sessionStorage.getItem("key")
    // I would like to use Axios here to verify if the token is legal
    return (
        key === "123" ? <Outlet /> : <Navigate to="/login"></Navigate>
    )
}

I would like to use Axios to verify if the token is legal, but Axios is asynchronous, so I can not get response and compare with local token.

What should I do ?

Johan · Accepted Answer · 2023-01-09T15:13:36.717

1

You can make an async/await function of your PrivateRoutes :

function PrivateRoutes() {
  const [component, setComponent] = React.useState(null);

  const key = sessionStorage.getItem("key");

  async function getData() {
    await axios.get('/verify-token', {
      params: {
        token: key
      }
    }).then(response => {
      if (response.data.valid) {
        setComponent(<Outlet />);
      } else {
        setComponent(<Navigate to="/login"></Navigate>);
      }
    }).catch(error => {
      console.error(error);
    });
  }

  React.useEffect(() => {
   getData();
  }, []);

  return component;
}

edited Jan 09 '23 at 15:13

answered Jan 09 '23 at 14:36

Johan

2,088
2
9
37

Thanks for your reply, I got an uncaught error with the code, Objects are not valid as a react child found object promise. Sad.... – BeifangSusu Jan 09 '23 at 15:11
I updated the code. Can you try ? – Johan Jan 09 '23 at 15:13
Yaho～It worked，you are so kind！ – BeifangSusu Jan 09 '23 at 15:22
No problem mate. My bad, I was returning a promise. Always return a JSX in a component :) – Johan Jan 09 '23 at 15:23
Thanks for your teach, I will remember it. Happy new year！ – BeifangSusu Jan 09 '23 at 15:27
1

Keep in mind that it's a React anti-pattern to store JSX in state. React components are a function of state and props, so just store the user auth data/value/etc and render the JSX from state/props. – Drew Reese Jan 09 '23 at 16:19

react router dom v6 private route with axios

1 Answers1