由于公司业务需求,找了crmeb的开源系统,最后实现多站点功能,那多站点怎么做呢?
一个是一开始就找多站点的项目,另一个就是多站点的项目功能不符合,自己进行改造。
(改造是一个长期过程,前面可能pc和h5:1-2个月改造完了,但是后面测试会发现会有漏网之鱼)
主要给有多站点改造需求的同学提供下:改哪些方面,以及思路,具体的代码可以问Ai。
(没时间先大概写下,后面整理完善)
后台管理端思路:登录时地址栏拼接站点参数,App.vue中地址栏获取参数-并存储到cookies中。
1.所有接口请求头拼接站点参数siteCode(接口拦截器),也有单独的接口没走拦截器比如:上传图片
2.登录后,App.vue写个重写路由方法,给所有页面地址栏拼接多站点参数(公共方法jumpPath,包括常用的跳转都需要拼接上多站点参数)
3.端监听地址栏变化-来更新cookies中站点参数/其他存储方式中的站点参数
下面是自己的注释:
多站点-siteCode参数全局注入逻辑:其他页面携带siteCode参数跳转到登录页,实现不同站点登录;所有接口header头携带siteCode参数;xn存储到sessionStorage;路由拦截器中beforeEach给所有页面添加siteCode参数,方便识别站点
具体修改内容:
(1)登录页:src/pages/account/login/index.vue
(2)路由中:src/router/index.js 中beforeEach
(3)拦截器:拦截器修改 和 添加监听页面方法实现更新站点参数和浏览器focus
(4)装修:所有选择的链接拼接xn参数,选择链接弹框的【确定】按钮,预览弹框/二维码,iframe标签
(4)同一浏览器多窗口多站点同时登录时,会弹框直接提示跳转到新租户,(接口请求之前把cookie中租户标识和和sesseion站点标识对比。不一致:切换了站点,弹框-跳新站点)
h5思路:思路大概和pc差不多,会多一些,比如:
1.微信授权登录,需要添加siteCode参数。
2.url解析地址栏参数时需:兼容hash路由(微信H5常见)
3.navigateTo, redirectTo,switchTab, reLaunch 常用的跳转方面全局搜下,App.vue封装个方法统一添加多站点参数,地址栏拼接不了参数的跳转方法需要改成其他跳转方法