React's most popular ecological alternative to antidpro builds lightweight backend management

# npm 7+
npm create vite spirit-admin -- --template react-ts

// src/
import axios, { AxiosError } from "axios";
import { history } from "./main";
// Set the response interceptor, the status code is 401 to clear the token, and return to the login page.(
  function (response) {
    return response;
  },
  function (error: AxiosError) {
    if (?.status === 401) {
      ("token");
      // Use the routing method outside the react component, and the usage method will be mentioned later when routing configuration      ("/login");
    }
    return (error);
  }
);
// Set the request interceptor, bring the tokens in the request(function (request) {
   = {
    authorization: ("token") || "",
  };
  return request;
});

// 
import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
export const queryClient = new QueryClient({
  defaultOptions: {
    queries: {
      refetchOnWindowFocus: false,
      retry: false,
    },
  },
});
(("root") as HTMLElement).render(
  <>
    <QueryClientProvider client={queryClient}>
        <App />
    </QueryClientProvider>
  </>
);

// src/hooks/query/
import { useQuery } from "@tanstack/react-query";
import axios from "axios";
import { queryClient } from "../../main";
// useQuery requires a unique key, react-query v4 is the array formatconst currentUserQueryKey = ["currentUser"];
// Query the current user. If there is no token in localStorage, no requestexport const useCurrentUserQuery = () =>
  useQuery(currentUserQueryKey, () => ("/api/me"), {
    enabled: !!("token"),
  });
// You can get the data of useCurrentUserQuery on other pagesexport const getCurrentUser = () => {
  const data: any = (currentUserQueryKey);
  return {
    username: data?.,
  };
};

// src/hooks/mutation/
import { useMutation } from "@tanstack/react-query";
import axios from "axios";
export const useLoginMutation = () =>
  useMutation((data) => ("/api/login", data));

// Store two types of usersexport const users = [
  { username: "admin", password: "admin" },
  { username: "employee", password: "employee" },
];

// Main fileimport express from "express";
import { users } from "./";
const app = express();
const port = 3000;
const router = ();
// Log in to the interface. If you successfully return token, there are only two cases of simulated tokens.("/login", (req, res) => {
  setTimeout(() => {
    const username = ;
    const password = ;
    const user = ((user) =>  === username);
    if (user && password === ) {
      (200).json({
        code: 0,
        token:  === "admin" ? "admin-token" : "employee-token",
      });
    } else {
      (200).json({ code: -1, message: "Error in username or password" });
    }
  }, 2000);
});
// For the current user interface, you need to bring authorization in the headers when requesting, and if it is incorrect, return a 401 status code.  Return permissions and username according to user type("/me", (req, res) => {
  setTimeout(() => {
    const token = ;
    if (!["admin-token", "employee-token"].includes(token)) {
      (401).json({ code: -1, message: "Please log in" });
    } else {
      const auth = token === "admin-token" ? ["application", "setting"] : [];
      const username = token === "admin-token" ? "admin" : "employee";
      (200).json({ code: 0, data: { auth, username } });
    }
  }, 2000);
});
(());
// Add /api to the interface prefix uniformly("/api", router);
// Disable 304 cache("etag");
(port, () => {
  (`Example app listening on port ${port}`);
});

"scripts": {
  ...
  "mock": "nodemon mock/"
}

// 
export default defineConfig({
  plugins: [react()],
  server: {
    proxy: {
      "/api": {
        target: "http://localhost:3000",
        changeOrigin: true,
      },
    },
  },
});

import {
  AppstoreOutlined,
  HomeOutlined,
  UserOutlined,
} from "@ant-design/icons";
import React from "react";
import { AuthRouterObject } from "react-router-auth-plus";
import { Navigate } from "react-router-dom";
import BasicLayout from "./layouts/BasicLayout";
import Application from "./pages/application";
import Home from "./pages/home";
import Login from "./pages/login";
import NotFound from "./pages/404";
import Setting from "./pages/account/setting";
import Center from "./pages/account/center";
export interface MetaRouterObject extends AuthRouterObject {
  name?: string;
  icon?: ;
  hideInMenu?: boolean;
  hideChildrenInMenu?: boolean;
  children?: MetaRouterObject[];
}
// Just configure auth on the route that requires permissionsexport const routers: MetaRouterObject[] = [
  { path: "/", element: <Navigate to="/home" replace /> },
  { path: "/login", element: <Login /> },
  {
    element: <BasicLayout />,
    children: [
      {
        path: "/home",
        element: <Home />,
        name: "Homepage",
        icon: <HomeOutlined />,
      },
      {
        path: "/account",
        name: "personal",
        icon: <UserOutlined />,
        children: [
          {
            path: "/account",
            element: <Navigate to="/account/center" replace />,
          },
          {
            path: "/account/center",
            name: "Personal Center",
            element: <Center />,
          },
          {
            path: "/account/setting",
            name: "Personal Settings",
            element: <Setting />,
            // Permissions            auth: ["setting"],
          },
        ],
      },
      {
        path: "/application",
        element: <Application />,
        // Permissions        auth: ["application"],
        name: "application",
        icon: <AppstoreOutlined />,
      },
    ],
  },
  { path: "*", element: <NotFound /> },
];

import { createBrowserHistory } from "history";
import { unstable_HistoryRouter as HistoryRouter } from "react-router-dom";
export const history = createBrowserHistory({ window });
(("root") as HTMLElement).render(
  <>
    <QueryClientProvider client={queryClient}>
      <HistoryRouter history={history}>
        <App />
      </HistoryRouter>
    </QueryClientProvider>
  </>
);

import { useAuthRouters } from "react-router-auth-plus";
import { routers } from "./router";
import NotAuth from "./pages/403";
import { Spin } from "antd";
import { useEffect, useLayoutEffect } from "react";
import { useLocation, useNavigate } from "react-router-dom";
import { useCurrentUserQuery } from "./hooks/query";
function App() {
  const navigate = useNavigate();
  const location = useLocation();
  // Get the current user and do not request it when there is no token in localStorage  const { data, isFetching } = useCurrentUserQuery();
  // The first time I entered the program, it was not a login page and there was no token, jump to the login page  useEffect(() => {
    if (!("token") &&  !== "/login") {
      navigate("/login");
    }
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, []);
  // If you enter the program for the first time, if it is a login page and the token has not expired (code is 0), you will automatically log in to the home page.  Use useLayoutEffect to avoid seeing the login page flash first and then jump to the home page.  useLayoutEffect(() => {
    if ( === "/login" && data?. === 0) {
      navigate("/home");
    }
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [data?.]);
  return useAuthRouters({
    // Pass in the current user's permissions    auth: data?. || [],
    // If you are getting the current user, display loading    render: (element) =>
      isFetching ? (
        <div className="flex justify-center items-center h-full">
          <Spin size="large" />
        </div>
      ) : (
        element
      ),
    // If you enter a page without permission, page 403 will be displayed    noAuthElement: () => <NotAuth />,
    routers,
  });
}
export default App;

// src/pages/login/
const Login: FC = () => {
  const navigate = useNavigate();
  const { mutateAsync: login, isLoading } = useLoginMutation();
  // Form Submit  const handleFinish = async (values: any) => {
    const { data } = await login(values);
    if ( === 0) {
      ("token", );
      // Request the current user      await (currentUserQueryKey);
      navigate("/home")
      ("Login successfully");
    } else {
      ();
    }
  };
  return ...
};

// src/layouts
import { Layout } from "antd";
import { Outlet } from "react-router-dom";
import styled from "styled-components";
// Overwrite styles with styled-componentsconst Header = styled()`
  height: 48px;
  line-height: 48px;
  padding: 0 16px;
`;
// Same as aboveconst Slider = styled()`
  .ant-layout-sider-children {
    display: flex;
    flex-direction: column;
  }
`;
interface BasicLayoutProps {
  routers?: MetaRouterObject[];
}
const BasicLayout: FC<BasicLayoutProps> = ({ routers }) => {
  // Abbreviation of style omitted  return (
    <Layout>
      <Header>
        ...top
      </Header>
      <Layout hasSider>
        <Slider>
          ...Left menu
        </Slider>
        <Layout>
          <>
            <Outlet context={{ routers }} />
          </>
        </Layout>
      </Layout>
    </Layout>
  );
};

// src/layouts/BasicLayout/components/
import { Menu } from "antd";
import { FC, useEffect, useState } from "react";
import { useAuthMenus } from "react-router-auth-plus";
import { useNavigate } from "react-router-dom";
import { useLocation } from "react-router-dom";
import { MetaRouterObject } from "../../../router";
import { ItemType } from "antd/lib/menu/hooks/useItems";
// Convert to the format required by the antd Menu component.  Only those that are configured with name and not hidden will be displayedconst getMenuItems = (routers: MetaRouterObject[]): ItemType[] => {
  const menuItems = ((total: ItemType[], router) => {
    if ( && !) {
      total?.push({
        key:  as string,
        icon: ,
        label: ,
        children:
           &&
           > 0 &&
          !
            ? getMenuItems()
            : undefined,
      });
    }
    return total;
  }, []);
  return menuItems;
};
interface SlideMenuProps {
  routers: MetaRouterObject[];
}
const SlideMenu: FC<SlideMenuProps> = ({ routers }) => {
  const location = useLocation();
  const navigate = useNavigate();
  const [selectedKeys, setSelectedKeys] = useState<string[]>([]);
  // useAuthMenus filter out routes without permissions first.  Then use getMenuItems to obtain the format required by the antd Menu component  const menuItems = getMenuItems(useAuthMenus(routers));
  // The drop-down menu that opens by default  const defaultOpenKey = ((i) =>
    (i?.key as string)
  )?.key as string;
  // Select menu  useEffect(() => {
    setSelectedKeys([]);
  }, []);
  return (
    <Menu
      style={{ borderRightColor: "white" }}
      className="h-full"
      mode="inline"
      selectedKeys={selectedKeys}
      defaultOpenKeys={defaultOpenKey ? [defaultOpenKey] : []}
      items={menuItems}
      {/* Select the menu callback and navigate to its route */}
      onSelect={({ key }) => navigate(key)}
    />
  );
};
export default SlideMenu;

// src/components/
import { Breadcrumb } from "antd";
import { FC } from "react";
import {
  Link,
  matchRoutes,
  useLocation,
  useOutletContext,
} from "react-router-dom";
import { MetaRouterObject } from "../router";
const PageBreadcrumb: FC = () => {
  const location = useLocation();
  // Get the routers passed in BasicLayout  const { routers } = useOutletContext<{ routers: MetaRouterObject[] }>();
  // Use react-router's matchRoutes method to match the route array  const match = matchRoutes(routers, location);
  // Process it to generate a breadcrumb array  const breadcrumbs =
    (match || []).reduce((total: MetaRouterObject[], current) => {
      if (( as MetaRouterObject).name) {
        ();
      }
      return total;
    }, []);
  // The last bread crumb cannot be clicked, the previous one can be clicked and redirected  return (
    <Breadcrumb>
      {((i, index) => (
        < key={}>
          {index ===  - 1 ? (
            
          ) : (
            <Link to={ as string}>{}</Link>
          )}
        </>
      ))}
    </Breadcrumb>
  );
};
export default PageBreadcrumb;

function Home() {
  return (
    <div>
      <PageBreadcrumb />
    </div>
  );
}