微信网页授权vue前端调试

一、后端为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