/fy-refactor

Primary LanguageVue

重构

  1. 路由
  2. 权限
  3. 页面
  4. 基础模板

鉴权大致流程

  1. 静态动态 asyncRoutes & constantRoutes
  2. 通过接口返回的数据从 constantRoutes 筛选出本角色有的菜单

记一下

接口前缀不再像以前一样用 process.env.***

具体参见 .env.development 以及 request.js

const env = import.meta.env

Vue2 => Vue3 迁移手册

https://v3.cn.vuejs.org/guide/migration/introduction.html

composition API

setup(props, context) {
  log(props.***, context.emit)
}

option API 还是和以前一样

template prop.sync => v-model:prop

关于此次重构

背景及原因

  1. 一年内重复报告的功能迭代又激起了我们一个功能多项目修改的痛点
  2. HR 后台 评估师后台功能类似，评估师后台本就是 copy HR 后台代码的一个项目(基础代码类似)
  3. HR 后台是最初 19 年 11 月 12 月刚入职的时候我搭起来的项目，项目架构不是太成熟，虽然随着时间慢慢丰富和完善，但由于最初的代码水平有限和技术选型不同于现在，性能上不高、样式不统一、维护起来相较其他后来的后台有一定差距在。
  4. 在大概的时间成本评估后（2周），致意 PD, PD 同意。

怎么做

  1. 基础技术选型上 Vue2 => Vue3，有一些断崖式更新，也存在一定学习成本和心智负担。但大部分能兼容且性能提升较大，如果顺利可以将其他后台升级，相当于用这里重构做试点
  2. 业务上将两后台代码合并做权限控制
  3. 统一样式
  4. 业务代码 copy，不兼容部分重写。
  5. 项目架构目前是从 github 上 copy 修改的。

如何验收

  1. 组件自测。
  2. 功能自测。
  3. 测试同学做全流程测试
  4. 性能上可用首页渲染时间做量化对比
  5. 权限测试

解决了什么

  1. 一个功能多项目修改问题
  2. 样式不统一问题
  3. 维护成本问题
  4. 性能问题 (在后台项目用户感知不会太明显)
  5. Vue 升级，如果顺利可后续升级其他项目。

现状和问题

问题主要出现在权限控制上：

  1. 此前没有最佳的权限控制实践（这是我的问题）
  2. github 上拉下来的权限逻辑较复杂 而目前 HR 后台的权限做得较为简单，可以维持现在的简单版本接着做，但是考虑到后续如果有颗粒度更小的权限需求，所以我现在尝试一个好的解决方案
  3. Vue2 => Vue3 本身及其生态存在一定学习成本和时间消耗