react-admin-web

├── public                     # 静态资源
│   │── favicon.ico            # favicon图标
│   └── index.html             # html模板
├── config                     # 
│   │── devServer.js           # 本地开发服务配置
│   └── env.js                 # 全局变量
│   └── webpack.config.js      # webpack 配置
├── scripts                    # 
│   │── build.js               # 生产打包命令
│   └── start.js               # 本地启动命令
├── src                        # 源代码
│   ├── assets                 # 图片，文件等静态资源
│   ├── components             # 全局公用组件
│   ├── hooks                  # 全局hooks
│   ├── layout                 # 全局 layout
│   ├── mock                   # 模拟api接接口
│   ├── pages                  # 业务相关页面
│   ├── router                 # 路由
│   ├── store                  # 全局 store管理
│   ├── utils                  # 全局公用方法
│   ├── App.js                 # 入口组件
│   ├── console.js             # 在浏览器控制台打印基本信息
│   ├── index.css              # 全局css
│   └── index.js               # 入口js
├── .browserslistrc            # 配置兼容浏览器
├── .eslintrc.js               # ESLint规则
├── .gitignore                 # git忽略文件配置
├── .prettierrc.js             # prettier配置
├── package-lock.json          # 依赖版本描述文件
├── package.json               # package.json
├── README.md                  # 项目描述文件
└── gh-pages.js                # 打包部署到github上的代码，你应该不需要他

# 克隆项目
git clone https://github.com/caihai123/react-admin-web.git
# or 
git clone https://gitee.com/caihai123/react-admin-web.git

# 进入项目目录
cd react-admin-web

# 安装依赖，不要用 cnpm或者yarn 安装
npm install 
# or 
npm i --registry=https://registry.npm.taobao.org

# 本地开发 启动项目
npm run dev

# 构建打包
npm run build

# 代码修复
npm run lint

// RouteAuth
import { Result } from "antd";
import { useSelector } from "react-redux";
import { selectMenu, selectMenuFlatten } from "@/store/menu";
import { useLocation } from "react-router-dom";
import Error401 from "@/pages/401";
import PageLoading from "./PageLoading";

// 权限路由包装组件
// 根据后端返回的菜单列表显示视图
export default function Auth(props) {
  const { pathname } = useLocation();
  const { status } = useSelector(selectMenu);
  const menuFlatten = useSelector(selectMenuFlatten);

  const component = {
    loading: <PageLoading />,
    succeeded: menuFlatten.some((item) => item.path === pathname) ? (
      <props.Component />
    ) : (
      <Error401 />
    ),
    failed: (
      <div
        style={{
          height: "100%",
          display: "flex",
          justifyContent: "center",
          alignItems: "center",
        }}
      >
        <Result
          status="500"
          title="权限错误！！！"
          subTitle="没有获取到您的权限，可能是菜单获取失败了，您可以尝试刷新整个页面。"
        ></Result>
      </div>
    ),
  };

  return component[status];
}