企业微信后台重定向登录

一. 背景

企业微信应用前台登录重定向进度条会重新加载,且code传输明文有安全问题.需要将企微应用登录改造为后端重定向登录

二.登录流程

auth2链接：https://open.weixin.qq.com/connect/oauth2/authorize?appid=CORPID&redirect_uri=REDIRECT_URI&response_type=code&scope=snsapi_base&state=STATE&agentid=AGENTID#wechat_redirect

1、阶段一：由前端拼接auth2链接

缺点：

1、auth2链接由前端构建，包含的必要参数无论是封装在项目里还是通过接口请求都有暴露的风险；

2、前端进行auth2重定向，会留下一层历史记录，在返回到第一层时会重新触发重定向，造成死循环，无法离开项目；

2、阶段二：由后端封装auth2链接，并直接操作前端重定向

接口：api/oauthUrl?redirecturl=${redirectUri}

优点：

1、auth2链接的所有参数都由后端拼接，不会暴露

2、由后端控制进行重定向，页面虽然依然多了一层路由，但是不会出现返回死循环

缺点：

bfcache，即 back-forward cache，可称为往返缓存，可以在用户使用浏览器的 后退 和 前进 按钮时加快页面的转换速度。这个缓存不仅保存页面数据，还保存了 DOM 和 JS 的状态，实际上是将整个页面都保存在内存里。如果页面位于bfcache中，那么再次打开该页面就不会触发 onload事件。这是 HTML5 世代浏览器新增的特性之一。

在上述流程中，我们跳转后端接口后已完成所有逻辑，重定向之后因为往返缓存原页面被浏览器缓存，现象就是第一次返回的时候页面是空白的。但是还有部分手机是不支持往返缓存的，就会导致第一次返回后页面刷新，不会白屏。所以在不同手机上第一次返回可能存在差异。

3、阶段三：手动重定向增加参数，作为判断依据

在页面原来的参数基础上，增加了redirectFlag=true参数，这样在第一次返回后，如果刷新就可以通过redirectFlag标识判断这是重定向页面，隐藏页面内容。

另外如果想都进行刷新的话，可以通过监听pageShow事件来进行操作，pageShow可以监听到当前页面是否取自往返缓存并进行手动刷新操作。

三.代码示例

前后端代码示例

后端代码示例