vue hash模式微信code授权路径异常处理

2,419 阅读1分钟

hash模式进行微信code授权,返回的路径会变成

http://localhost:8080/?code=**********&state=123#/login

正常的history模式是

http://localhost:8080/login?code=**********&state=123

处理方法

对路由进行拼接,因为如果不做拼接。

1-接口请求报错Content-Type跨域; 2-页面跳转出问题,因为hash模式是通过#号识别的

created() {
    // 判断微信授权回来
    console.log("route", this.$route.query);
    let url = window.location.href;
    if (url.indexOf("code") != -1) {
      if (url.substr(-7) == "#/login") {
        let url1Index = url.indexOf("?");
        let url1 = url.substring(0, url1Index);
        let url2 = url.substring(url1Index, url.length - 7);
        let url3 = url.substr(-7);
        let urlAll = url1.concat(url3, url2);
        window.location.href = urlAll;
      } else {
        this.state = this.$route.query.state;
        let code = this.$route.query.code;
      }
    }
  },

如果不对url重新拼接获取参数也是可以的。

额,我不晓得什么情况下会不做拼接,大概有的吧,

        // 获取state
        let stateIndex = url.indexOf("state");
        let state = url.substring(stateIndex + 6, url.indexOf("#"));
        // 获取code
        let codeIndex = url.indexOf("code");
        let code = url.substring(codeIndex + 5, url.indexOf("&"));

微信授权

appid要改成自己的,redirect_uri要在公众号配置域名,如果是hash模式需要用encodeURIComponent处理#号,state是返回是携带的参数

redirectToWxUrl() {
      let redirect_uri = encodeURIComponent(
        `${process.env.VUE_APP_URL}/#/login`
      );
      // let scope = "snsapi_base" //静默授权 - 未关注获取不到用户信息
      let scope = "snsapi_userinfo"; // 未关注弹框授权  已关注静默授权
      window.location.href = `https://open.weixin.qq.com/connect/oauth2/authorize?appid=wx228b25db23e7a878&redirect_uri=${redirect_uri}&response_type=code&scope=${scope}&state=${this.userPhone}#wechat_redirect`;
    }