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

Posted 2020-11-03 ovocake

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

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

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第一次搞移动端授权认证，还是跨域名跨终端。还好最后都实现了，通宵两天也值了~