搭了个 React 后台框架，拥抱开源（带权限管理）

做这个的初心 主要是为了学习和分享。市面上有很多优秀的 React 开源后台框架可以开箱即用 比如 antd-pro、react-admin 等，但有时候公司需要一些定制的需求功能 不熟悉下框架源码可能比较难办，一般团队会开发自己的后台脚手架，为了方便灵活的应对公司特有的业务需求

项目仓库地址：
gitee.com/mrfront/rea…

React 18 更新后 又改了一版，希望路过的 各位大侠 点赞支持下~

技术栈

React 18× + TypeScript + React-Router 6× + Mobx 6× + Ant-Design 4× + Express
react-router 的 v5 和 v6 版本写法差别还是蛮大的

安装和启动

用 nodejs Express mock 接口还是挺方便灵活的，我是直接将 json 数据简单的吐到前台 不用做增删改查。项目环境下可以直接使用后端的接口

npm i
npm run mock
npm run serve

测试账号
用户名：admin
密码：123456

踩坑和总结

在整个过程中也遇到一些坑，我会自己记录下，也贴出来给大家分享下：

1. antd 日期选择框不显示中文，是忘了导入 import 'moment/locale/zh-cn'
2. antd 已默认支持 typescript，@types/antd 包已移除
3. antd 的表单实例方法 getFieldsValue() 当参数传入 true 时，只会返回有值的字段，为避免混淆一般不要传参
4. mobx 不要直接解构 store 中的 state，会失去响应，例如 const { globalStore } = useStores(); const { userInfo, updateUserInfo } = globalStore 是错误的
5. 注意 mobx 除了异步的 action，默认 action 都是同步的，修改完状态能立即拿到最新值，而 react hook 的 setState 是异步的
6. 使用 require.context 批量导入文件不要封装为函数，因为require.context的参数只能是字面量 不能使用变量！
7. useEffect、useMemo 需要响应 mobx 状态变化，要用 `` 如 useEffect(() => { /* do somthing */ }, [store.userInfo])
8. mobx 异步 action 中修改状态 用 runInAction 包裹下
9. React 18（TS）组件有 children，需要在组件类型中定义该属性：children?: ReactNode
10. react-router-dom v6 原生支持 typescript，升级时移除 @types/react-router-dom
11. history@5 location 的类型 Location，其中 state: unknown，所以使用 location.state 时需要自己断言
12. react-router 不能像 vue-router 那样做刷新路由的功能，这里用了个小技巧 先跳转到一个预设的空白页 navigate('/blank')，60ms 后再返回 navigate('-1')，这样视觉上做到无感
13. react-router v6 不允许将 <Route /> 等内置路由组件单独封装成公用组件，导入时就会报错（待研究）

权限管理

权限管理包括三个模块：菜单管理、角色管理、用户管理，通过接口请求到 permissions 列表，对路由进行过滤控制路由访问的控制，不在权限内的就跳转 404页

可以新增修改菜单，权限标识用模块和功能冒号间隔的方式 比如 sys:menu:info，多个标识就用逗号隔开

为角色添加权限，勾选菜单权限树的节点即可，菜单权限树是 菜单管理 创建的

因为平时在公司团队 Vue 用的比较多一些，又同构了一套 Vue3 的版本， vue3-scaffold-admin

另外感慨下 近几年前端行业真是卷的特别厉害……