这个问题其实不难解决,尤其是单页应用

  1. 项目前后端完全分离,意思后端不渲染页面,只提供 api。单页应用 build 出来的页面可以完全用 nginx 或静态服务器渲染

  2. 约定一个用于授权回调链接中的 redirect url,域名得和前端业务域名一致

  3. 后端判断前端过来的请求,如果 cookies 失效需要重新跳转授权了,那么返回一个标志告知前端需要微信跳转至授权页面

  4. 前端通过 location.href 跳转至该授权回调链接。授权完毕会 redirect 到步骤 2 的约定 url 中。目前为止 location.href 和微信 redirect 一共使浏览历史+ 1

  5. 前端将该 code 存至 localstorage,然后调用 history.back()

  6. 这时就又回到了授权跳转前的那个页面,目前为止 history 条数不增不减!然后该页面再发起的请求就可以带上 localstorage 的 code 参数了,后端可以根据该 code 参数获取用户信息,再写入 cookies,之后的请求就一切顺利了

其实如果默认首次打开前端页面就尝试获取用户信息(可以写在单页应用的入口 js 中),步骤会更简单,第 5 步因为请求过微信授权页,域名变动过,再 redirect 回原域名也相当于首次打开,这时候也会触发获取用户信息,但本次获取因为有 code 的存在,这时候肯定能获取成功,并且 cookies 也能写入成功了,也就不需要将该 code 存至 localstorage,直接执行 history.back()即可。

这里再补充一下,由于请求过微信授权页,域名变动过,执行 history.back() 即使回到之前的页面了也会触发重新加载,利用该特性,还是能够再次触发获取用户信息,又因为 back 之前 cookies 已经写入了,所以肯定可以获取成功。

以上,可以实现只用一个中转页面跳过来跳回去的办法让浏览历史不增加。

其实里面还有很多细节可以优化,甚至能实现 back 之后继续执行之前的操作,实现更加极致的用户体验。


 评论