React18+TS 通用后台办理体系解决方案落地实战

核心代码，注释必读

// download：3w ukoou com

东西和库

在开端编写代码之前，咱们需求保证咱们有以下的东西和库：

这些东西和库将帮助咱们快速构建具有高可维护性和可读性的代码。

初始化项目

首先，咱们需求创立一个React项目。您能够运用create-react-app东西来轻松创立一个，也能够手动创立。

npx create-react-app my-app --template typescript

这将创立一个名为“my-app”的React项目，并运用TypeScript模板。一旦项目创立成功，您能够进入该项意图目录并开端编写代码。

装置依赖

咱们需求装置Ant Design，React Router，Axios等库和东西。您能够在操控台中运用以下指令装置它们：

npm install antd react-router-dom axios eslint prettier --save

这将装置一切必要的库和东西，以便咱们开端开发。

编写代码

现在，咱们能够开端编写代码。以下是咱们的项目结构：

my-app/
├── src/
│   ├── components/
│   │   ├── Dashboard/
│   │   ├── Layout/
│   │   ├── Login/
│   ├── pages/
│   │   ├── Dashboard/
│   │   ├── Login/
│   ├── routes/
│   │   ├── index.tsx
│   ├── App.tsx
│   ├── index.tsx
  • components/目录将包含咱们的组件，如仪表板、登录和布局组件。
  • pages/目录将包含咱们的页面组件，如仪表板和登录页。
  • routes/目录将包含咱们的路由配置。
  • App.tsx是咱们的主运用程序组件。
  • index.tsx是咱们的主进口文件。

登录组件

咱们将从编写登录组件开端。它将出现登录表单和处理验证逻辑。

import React, { useState } from "react";
import { Form, Input, Button, Alert } from "antd";
import { UserOutlined, LockOutlined } from "@ant-design/icons";
const Login = () => {
  const [error, setError] = useState("");
  const [loading, setLoading] = useState(false);
  const onFinish = async (values: any) => {
    setLoading(true);
    setError("");
    try {
      // Your authentication logic goes here
    } catch (err) {
      setError(err.message);
    }
    setLoading(false);
  };
  return (
    <>
      {error && <Alert message={error} type="error" />}
      <Form onFinish={onFinish}>
        <Form.Item
          name="username"
          rules={[{ required: true, message: "Please input your username!" }]}
        >
          <Input prefix={<UserOutlined />} placeholder="Username" />
        </Form.Item>
        <Form.Item
          name="password"
          rules={[{ required: true, message: "Please input your password!" }]}
        >
          <Input.Password prefix={<LockOutlined />} placeholder="Password" />
        </Form.Item>
        <Form.Item>
          <Button type="primary" htmlType="submit" loading={loading}>
            Sign In
          </Button>
        </Form.Item>
      </Form>
    </>
  );
};
export default Login;

布局组件

咱们将创立一个名为“Layout”的组件，该组件将包含一切页面并出现咱们的导航栏和侧边栏。

import React from "react";
import { Layout as AntLayout, Menu } from "antd";
import {
  DashboardOutlined,
  UserOutlined,
  SettingOutlined,
} from "@ant-design/icons";
import { Link, useLocation } from "react-router-dom";
const { Header, Content, Sider } = AntLayout;
interface LayoutProps {
  children: React.ReactNode;
}
const Layout = ({ children }: LayoutProps) => {
  const location = useLocation();

React18+TS 通用后台办理体系解决方案落地实战后台办理体系中打通权限

这是一个运用React Context API来办理用户人物和权限的比如：

import React, { createContext, useState } from "react";
type Role = "admin" | "user" | "guest";
interface AuthContextValue {
  userRole: Role;
  hasPermission: (permission: string) => boolean;
}
export const AuthContext = createContext<AuthContextValue>({
  userRole: "guest",
  hasPermission: () => false,
});
interface AuthProviderProps {
  children: React.ReactNode;
}
const AuthProvider = ({ children }: AuthProviderProps) => {
  const [userRole, setUserRole] = useState<Role>("guest");
  const hasPermission = (permission: string) => {
    switch (permission) {
      case "dashboard.view":
        return ["admin", "user"].includes(userRole);
      case "user.view":
        return ["admin"].includes(userRole);
      case "user.edit":
        return ["admin"].includes(userRole);
      default:
        return false;
    }
  };
  return (
    <AuthContext.Provider value={{ userRole, hasPermission }}>
      {children}
    </AuthContext.Provider>
  );
};
export default AuthProvider;

在这个比如中，咱们在AuthContext中导出一个Provider，它会持有咱们的用户人物，以及一个用于查看用户是否有拜访某些内容的函数。在这个示例中，咱们在函数中硬编码了一些权限查看逻辑，但在实践运用中，您或许需求从API中获取人物和权限信息。

现在，咱们能够在咱们的布局组件（或任何其他组件）中运用AuthContext组件来出现有权拜访的内容：

import React, { useContext } from "react";
import { Layout as AntLayout, Menu } from "antd";
import {
  DashboardOutlined,
  UserOutlined,
  SettingOutlined,
} from "@ant-design/icons";
import { Link, useLocation } from "react-router-dom";
import { AuthContext } from "../contexts/AuthContext";
const { Header, Content, Sider } = AntLayout;
interface LayoutProps {
  children: React.ReactNode;
}
const Layout = ({ children }: LayoutProps) => {
  const location = useLocation();
  const { hasPermission } = useContext(AuthContext);
  return (
    <AntLayout style={{ minHeight: "100vh" }}>
      <Header className="header">
        <div className="logo" />
        <Menu theme="dark" mode="horizontal" selectedKeys={[location.pathname]}>
          <Menu.Item key="/" icon={<DashboardOutlined />}>
            <Link to="/">Dashboard</Link>
          </Menu.Item>
          {hasPermission("user.view") && (
            <Menu.Item key="/users" icon={<UserOutlined />}>
              <Link to="/users">Users</Link>
            </Menu.Item>
          )}
        </Menu>
      </Header>
      <AntLayout>
        <Sider width={200} className="site-layout-background">
          {hasPermission("settings.view") && (
            <Menu
              mode="inline"
              defaultSelectedKeys={[location.pathname]}
              style={{ height: "100%", borderRight: 0 }}
            >
              <Menu.Item key="/settings" icon={<SettingOutlined />}>
                <Link to="/settings">Settings</Link>
              </Menu.Item>
            </Menu>
          )}
        </Sider>
        <AntLayout style={{ padding: "0 24px 24px" }}>
          <Content
            className="site-layout-background"
            style={{ padding: 24, margin: 0, minHeight: 280 }}
          >
            {children}
          </Content>
        </AntLayout>
      </AntLayout>
    </AntLayout>
  );
};
export default Layout;