# leanr-react-cyx

**Repository Path**: w120/leanr-react-cyx

## Basic Information

- **Project Name**: leanr-react-cyx
- **Description**: No description available
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2025-09-08
- **Last Updated**: 2025-09-26

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# 后续规划

## 基于一个项目完成相关知识点的讲解

- 项目如何进行基础搭建
  - 如何封装axios
  - 如何实现权限相关模块
    - 双token校验
    - 。。。
  - 如何实现路由相关模块
    - 路由守卫
    - 动态路由
    - 。。。
  - 如何实现状态管理模块
    - 如何封装全局状态管理
    - 如何封装模块状态管理
    - 。。。
  - 如何实现组件相关模块
    - 如何封装全局组件
    - 如何封装局部组件
    - 。。。
  - 如何实现工具相关模块
    - 如何封装全局工具
    - 如何封装局部工具
    - 。。。
- 微前端
  - 如何实现微前端
  - 为什么要使用微前端
- 项目如何进行优化
  - 第一块面试题死背
  - 项目实际业务场景的优化
    - useMemo、useCallback、React.memo
  - 打包层面的优化
    - 代码分割
    - Tree Shaking
    - 压缩
    - 。。。
- 项目如何进行部署
  - 部署流程是什么
  - 如何实现自动化部署

## 在知识点讲解的过程中完成简历的编写

- 简历最晚9-11号给到

## 项目地址

- https://rainkai.com/backoffice/
- admin
- 123456

## 微前端

- 一个项目里面可以使用多种框架
- 未解决新老框架甚至不同框架之间的兼容问题

## 登录实现

- 简单来说，调用后端登录接口，拿到token和refreshToken，然后将这两个token存储到localStorage中
- 登录后，每次请求都在请求头中携带token，后端根据token校验权限，如果校验失败则返回401，前端收到401后，判断本地refreshToken是否还在有效期（我们已经封装好了Cache模块，会有一个过期时间）
  如果有效，则调用refreshToken接口刷新token，并且重新发送请求，如果刷新失败则需要跳转到登录页面
- 并且我们还会进行路由的监听，判断token或者refreshToken是否存在，如果不存在则跳转到登录页面

## CI/CD

- 不是我搭建的，我把代码推到对应的分支，会自动触发流水线，然后触发构建，进行拉代码、builder、打包镜像、push docker等操作。aaa