关于vue跨域名对接微信授权认证和APP授权认证

时间:2021-03-06 05:23:40

这种情况一般也只会出现在前后端分离,跨域名授权的时候吧。耗费了一个前端+一个后台+一个网关,熬夜通宵了两天才整出来一套方法(你们见过凌晨6点的杭州吗,对,我下班的时候天黑了,到家天亮了。。。。),和开发APP第三方各种联系,各种百度、谷歌what、why...

关于vue跨域名对接微信授权认证和APP授权认证

先说说和微信的授权认证吧,后台和网关直接的逻辑流程就不说了,就说前端的:前端业务逻辑是在加载页:

1.请求网关接口,获取用户授权状态。

2.如果授权过就直接跳转首页。

3.如果未授权过就去跳转微信授权页。

这一路上遇到过很多的问题,前端的主要问题就三个:

第一个是网关原本打算302重定向微信授权页,但是也许是微信跨域名的原因吧....失败了。我们果断换成了 window.location.href跳转授权。授权完成后重定向刷新当前页。

第二个是AJAX跨域名请求发送cookie,一开始以为是cookie木有set进来,后来测试了几波后发现是跨域名发送cookie的时候需要对ajax的封装做处理加上

beforeSend: function (xhr) {
xhr.withCredentials = true
},

第三个是因为要对接五个后台,一开始没确定好数据的传输格式,导致AJAX不通,解决方法是将ajax提交的数据转成字符串,再在ajax封装里加上

headers: {
"Content-Type": "application/json; charset=utf-8",
"Accept": "application/json; charset=utf-8"
},

接下来说一下APP的认证,APP的认证由于原先就和第三方商量好了所以流程上没有问题,就是遇到跨域名set-cookie失败。安卓端webView对方加了一串代码允许跨域名后,可以实现set-cookie了,IOS的由于系统限制一直无法实现。经过测试,ajax跨域名set-cookie在IOS貌似搞不定,最后又换成了 window.location.href......

233333第一次搞移动端授权认证,还是跨域名跨终端。还好最后都实现了,通宵两天也值了~