vue 微信登录遇到的坑 - 简书 - 程序猿·D·安宇雨 DeepMind

vue 微信登录遇到的坑 - 简书

安宇雨 - 随手采集
2019-09-24 13:56:01
随手采集
0000-未整理-等待研究

微信登录官方文档：https://open.weixin.qq.com/cgi-bin/showdocument?action=dir_list&t=resource/res_list&verify=1&id=open1419316505&token=&lang=zh_CN
遇到问题的项目： pc端通用信用官网

主要是记录自己遇到的问题
一开始，是直接沿用项目之前的微信登录的js，redirect_uri也是固定的index.htm，后面考虑到详情页的微信登录，redirect_uri改为动态的，这时候就出问题了，只有index.htm可以微信登录，详情页登录不了。

开始排查问题

首先在本地将redirect_uri写死成#/creditDetails，发现可以跳转，这时我认为#/creditDetails为重定向链接是没有问题的，但是我没有注意到虽然可以跳转，但是跳转过去后cookie并没有登录信息，我找不到原因了，于是请教后台同事，
后台同事一下子看出问题，原来他是通过查询登录接口的referer来生成cookie信息的，#/creditDetails为重定向地址时，referer还是index.htm，并没有带上url中的code参数，所以生成不了cookie的登录信息，查询登录接口也是返回-6.

解决问题：

code肯定是前端从url中拿到，在查询登录接口时传参给后台，而不是从referer中取code参数，因为referer有限制，传递的url并不稳定，不会一定是想得到的有参数的url。
怎么拿code
a. index.htm页是很简单的，直接从url中拿到，因为微信登录重定向后index.htm会刷新，这时url中有code，刷新后的页面会重新请求查询登录接口，后台拿到code，就会返回登录态了
b. ‘#/creditDetails’页还是有问题，因为，微信登录重定向后，这个页面根本不会刷新，而且也监控不到url的变化。只是在url中加了参数code,state，页面没有任何变化，这个时候，需要新建一个路由链接放微信登录成功重定向中间页，只用来写重定向的逻辑
微信登录中间页，进入这个页面，去取url中redirect参数，这个参数是微信登录的参数中redirect_uri自己设定的，首页时这个值是index,详情页时这个值是creditDetails。
a. 拿到redirect参数后，直接location.href跳转到指定页，带上url中的code和state参数。
b. 这时又发现问题，location.href=‘index.htm?/state=xxx’时，页面会跳转，location.href=‘index.htm#/creditDetails?/state=xxx’时，页面都不会跳转。
编程式导航路由，在vue中用location.href跳转是无效的，router.replace(location, onComplete?, onAbort?)方法实现页面跳转
发现编程式导航后，页面仍然没有刷新，还停留在微信登录二维码的地方，取消keep-alive,数据会重新加载，还需要在中转页关闭微信登录的弹窗和背景，这个微信登录内容组件的显示隐藏用Vuex store存储的，不手动关闭，或者刷新页面时默认false,都会显示这个内容。