一、需求背景
在当前项目(叫Parent项目,简称P项目)中抽离一个精简版项目(Child项目,简称C项目),用作其他用途。隐藏P项目的所有logo和名称,增加部分页面如登录页面等。
二、实现思路
1.拷贝一份P项目通过删减和增加特定页面来生成一个全新的项目,在新的项目上进行维护。
优点:项目独立不会冗余过多的权限控制和兼容代码
缺点:相同需求变更需要维护两套代码,增加工作量
2.根据一个配置开判断项目类型是P还是C,根据权限来控制路由,实现一套代码维护两套逻辑。
优缺点和第一种方法正好相反
总结:权衡业务需求发现,C项目不同的模块只有登录注册,其他功能都是和P项目完全相等或者是P项目的阉割版,为了维护更加方便决定在P项目上根据权限进行区分。
三、路由实现
1、根据权限加载路由
之前这里是两大坨路由配置,给拆分成两个文件,对应两个平台去维护。
import PRoute from './P.js'
import CRoute from './C.js';
const isC= store.state.app.isC; // 是否是C项目
if (isC) {
// P平台
router = new Router({routes: CRoute});
} else {
// C平台
router = new Router({routes: PRoute});
}
说明:这里从vuex里获取的权限控制是根据域名判断的,所以进入页面就使用 isC 去判断是可以的。
const state = {
isTripartite: location.host.indexOf('C') > -1
}
如果配置是根据接口来获取这里会有问题,因为加载路由时参数还没有获取到。这个项目相对比较固定,所以使用域名去判断,对于项目需要多次私有化部署的需求,则需要把路由加载放在获取平台配置的成功回调中去做。
四、P项目信息隐藏
还是从vuex获取当前平台信息
data () {
return {
isC: this.$store.state.app.isC
}
},
在页面上根据isC字段判断来操作。
五、总结
P项目和C项目都是同一套代码,根据域名去加载不通的路由和一些业务判断。