react-router-dom V6 实现react 路由登录拦截

最新推荐文章于 2024-08-27 17:48:58 发布

清云随笔

最新推荐文章于 2024-08-27 17:48:58 发布

阅读量4.8k

点赞数 2

文章标签： react.js

本文链接：https://blog.csdn.net/zq18877149886/article/details/130295026

版权

该文描述了一个React应用中的路由配置，包括首页、布局页、登录和登出页面。同时，文章还介绍了一个名为`VerifyLogin`的功能，该功能用于检查用户登录状态，如果未登录则重定向到登录页面。登录状态是通过cookie中的`token`和存储的`CURRENT_USER`数据来验证的。

摘要由CSDN通过智能技术生成

const routes: any = [
  {
    path: "/",
    element: <Navigate to={"/layout/homePage"} />,
  },
  {
    path: "/layout",
    element: <VerifyLogin element={<BasicLayout />} />,
    children: [],
  },
  {
    path: "/signIn",
    element: <SignIn />,
  },
  {
    path: "/signOut",
    element: <SignOut />,
  },
];

// 实现路由拦截
function VerifyLogin(prop: { element: ReactElement }) {
  const isLogin = cookies.get("token") && getStorageData(CURRENT_USER);
  return isLogin ? prop.element : <Navigate to="/signIn" replace />;
}