技术
- React 脚手架
create-react-app - react hooks
- 状态管理：
mobx - UI组件库：
antd v4 - ajax请求库：
axios - 路由：
react-router-dom以及history - 富文本编辑器：
react-quill - css编译器：
sass
基础功能
- 登录、退出
- 首页
- 内容（文章）管理：文章列表、发布文章、修改文章
项目搭建
项目目录结构
/src
/assets 项目资源文件
/components 通用组件
/pages 页面
/store mobx状态仓库
/utils 工具，比如，token、axios的封装等
App.js 根组件
index.css 全局样式
index.js 项目入口
路由权鉴
React没有vue的路由守卫（beforeEach、beforeEnter），如果要检查用户是否登录，需要手动实现一个路由权鉴。
实现原理：HOC
自己封装一个HOC高阶组件，实现未登录拦截，并跳转到登录页面。
思路：在非登录页面，判断本地是否有token，如果有，就返回子组件，否则就重定向到登录页Login
实现步骤
- 在components目录中，创建AuthRoute/index.js文件
- 判断是否登录
- 若已登录，直接渲染相应页面组件
- 未登录，重定向到登录页面
- 将需要鉴权的页面路由配置，替换为AuthRoute组件渲染
