最近在做 企微 第三方应用的 H5 登录，下面把整个流程梳理下
-
构造授权链接
- 首先 我们作为服务商的模式，需要构造第三方应用的 授权链接
- 第三方应用链接构造，需要传 appid：第三方应用id
-
拿到code授权登录
- 授权之后，拿到code,走我们的系统登录，这个时候，接口会根据code 告知我们 哪个企业授权的应用
-
初始化 js sdk
- 拿到解析后的 企业id ,以及我们自身应用的id 去初始化 js sdk
问题备注：
这里备注下：由于 我们开发中有更换过域名，当时初始化 js sdk的时候，一直报80001 错误，解决办法： 第三方应用修改应用内配置，这里修改可信域名 未上线的需要删除重新安装第三方应用，已上线的需要重新提交审核上线修改的配置才会生效
流程梳理如下：
代码如下：
//实现一个 拦截 url search 的参数方法
const getUrlSearchParams = key => {
const searUrlStr = window.location.search
const paramStr = searUrlStr.split('?')[1]
const searchParams = new URLSearchParams(paramStr)
const val = searchParams.get(key)
return val
}
//在页面初始化的时候，执行 getUrlSearchParams
mounted(){
const code = getUrlSearchParams('code')
if(code){
//执行登录逻辑
......
//执行初始化 js-sdk
.........
}else{
window.location.replace(AuthUrl)
}
}
第一集：上线
经过一个多星期的开发，项目顺利上线了，emm, 看着我写的登录流程觉得没问题，心里暗自窃喜。
第二集：为什么我们的登录这么慢，赶紧优化
领导对比了其他家的应用，觉得我们的应用太次，登录也很慢，转半天 才到首页。emm,既然领导来亲自找咱了，那就牺牲下划水的时间赶紧去优化吧
- 缓存登录态: 把登录信息 用 localStorage 缓存起来
- 登录失效重新授权
- 拆分接口：由于我们有涉及到海报分享，要用到头像，但是企微的这个头像会存在跨域问题，所以我们在登录接口 返回的是base64，所以这个响应时间就会有点长，就把这个头像 单独用一个接口去取
- 骨架屏设计：让用户可以先看到一些静态不变的Ui,动态的UI 做了一个骨架占位，告别了转一转 emm, 看起来没啥问题，那就上线吧，领导看到效果后，竖起了大拇指👍🏻
第三集：企微多企业切换，让我发量--（减减）
登录优化刚上线不久，项目负责人跑过来，凉了，切换企业怎么登录信息还是之前的企业
咦，我当时反问他，切换企业为什么不重新登录？这可能是人受到攻击时的第一反应，问题推出去 😄 后来我想了下，原来是我把 登录信息以及凭证信息都缓存了。清除缓存登录又慢，不清除，切换企业又受影响，太难了。还好天无绝人之路，想到的一个方案就是：如果jssdk初始化报错的话，就重新授权，因为初始化的凭证信息是和企业进行关联的，哦吼，有点道理。 在初始化jssdk的地方加了，错误捕获授权，如果存在缓存，并且报错为对应的状态码，重新走授权！ok,很快我就写完了，上线吧，负责人喊了声：快男... 。
第四集：被测试小姐姐疯狂怼
早上一大早，测试小姐姐就过来找我： 为什么我退出了我的企微账号，换成其他人的怎么h5展示的还是我的信息啊？ 我： 解决不了，我怎么知道你切换了账号！ 然后测试小姐姐被我怼的好委屈，事后想想确实属实不应该，应该使劲怼~
- 企微清除缓存时机：重新登录
- 为什么重新登录没清除呢？原来小姐姐用的是pc 工作台进入的，沃日啊，这企微的bug啊，pc的没清除掉
拖鞋方案：如果是pc,工作台进入的，就清除缓存，重新走授权逻辑！
