使用axiosReact路由器dom v6专用路由[重复]

a8jjtwal 于 2023-01-13 发布在 iOS

关注(0)|答案(1)|浏览(195)

- 此问题在此处已有答案**：

How to create a protected route?（5个答案）
3天前关闭。
我有App.js只包含路线：

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>
  );
}

而我的PrivateRoute.js是

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>
    )
}

我想使用Axios验证令牌是否合法，但Axios是异步的，因此无法获得响应并与本地令牌进行比较。
我该怎么办？

axios

来源：https://stackoverflow.com/questions/75058769/react-router-dom-v6-private-route-with-axios

1条答案

按热度按时间

kjthegm61#

可以将PrivateRoutes转换为async/await函数：

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;
}

赞(0）回复(0）举报 2023-01-13

我来回答

使用axiosReact路由器dom v6专用路由[重复]

1条答案

相关问题

热门标签

最新问答