一、后端为SpringBoot,已经写好微信授权的方法【我的后端域名为:http://t238997p11.qicp.vip】
[可参考我的上一篇博客:https://blog.csdn.net/qq_38151401/article/details/88242436]
接口为:
http://t238997p11.qicp.vip/sell/wechat/authorize?returnUrl=http://4uv4xq.natappfree.cc/#/
其中:http://t238997p11.qicp.vip等价于http://localhost:8080,域名可在natapp或花生壳下申请配置
二、前端为vue【我的前端域名为:http://7n7855.natappfree.cc】
1、在index.js的dev下配置以下内容
sellUrl: 'http://7n7855.natappfree.cc', //前端项目地址
openidUrl: 'http://t238997p11.qicp.vip/sell/wechat/authorize', //微信授权登录地址
wechatPayUrl: 'http://127.0.0.1' //微信支付地址
2、在最开始的页面下的created方法里
created() { //微信登录处理过程分析: /* 1、微信访问http://7n7855.natappfree.cc前端项目 2、首先获取在路径中获取openid,第一次登录时还没有请求微信授权,故openid为undefined 3、此时getCookie('openid') == null为true,地址栏跳转到:[注意:末尾一定要加上/#/] http://t238997p11.qicp.vip/sell/wechat/authorize?returnUrl=http://7n7855.natappfree.cc/#/ 4、访问上述地址后获取到openid并跳转到http://7n7855.natappfree.cc/#/?openid=获取到的openid 5、页面会再次刷新,此时openid已经有值了,将openid缓存到cookie并设置过期时间 6、getCookie('openid') == null为false,此时页不会再跳转了 */ //如果url里有openid, 设置进cookie var openid = this.$route.query.openid; console.log('openid:' + openid); if(typeof openid !== 'undefined') { var exp = new Date(); exp.setTime(exp.getTime() + 3600 * 1000);//过期时间60分钟 document.cookie = 'openid=' + openid + ";expires=" + exp.toGMTString(); } //获取openid //一定要注意,如果测试太多次数了,要清除微信端cookie中的缓存数据,不然测试结果和预期有很大差别 if(getCookie('openid') == null) { //注意:地址后面一定要加上"/#/",这个才能重定向,否则会一直不断重复登录!!!!! location.href = config.openidUrl + '?returnUrl=' + encodeURIComponent(config.sellUrl + "/#/"); } //自己的处理 this.$http.get('/someUrl').then((response) => {}); }
三、微信端访问:http://7n7855.natappfree.cc