h5 获取微信公众号授权登录

微信扫码打开h5 获取微信公众号授权登录的code，如果跳转时自己原本携带的参数该如何进行授权。

appid : 公众号的appid

redirect_uri:  跳转的链接，授权成功之后会将获取的code拼接到该链接上

scope: 应用授权作用域，snsapi_base （不弹出授权页面，直接跳转，只能获取用户openid），snsapi_userinfo （弹出授权页面，可通过openid拿到昵称、性别、所在地。并且， 即使在未关注的情况下，只要用户授权，也能获取其信息 ）

response_type： 返回的类型，一般为code，如何可以修改成别的，还望大神们告知！

state：重定向后会带上state参数，开发者可以填写a-zA-Z0-9的参数值，最多128字节

#wechat_redirec: 无论直接打开还是做页面302重定向时候，必须带此参数

 window.location.href =
            "https://open.weixin.qq.com/connect/oauth2/authorize?appid=" +
            appid +
            "&redirect_uri=" +
            encodeURIComponent(window.location.href) +
            "&response_type=code&scope=snsapi_userinfo&state=STATE#wechat_redirect";

一般的判断是否进行登录通过一下方式

 let data = this.getUrlCode();  //是否存在code

 if (data.code== null || data.code=== "") {

         window.location.href =
            "https://open.weixin.qq.com/connect/oauth2/authorize?appid=" +
            appid +
            "&redirect_uri=" +
            encodeURIComponent(window.location.href) +
            "&response_type=code&scope=snsapi_userinfo&state=STATE#wechat_redirect";

}else {}
 

  // 获取连接上的参数值
    getUrlCode() {
      var url = new URL(window.location.href);
      var searchParams = url.searchParams;
      // 创建一个对象来存储参数
      var params = {};
      let list = []
      searchParams.forEach((value,key) => {
        params[key] = value
      })
      return params
    },

这种方式进行判断其实是有的，如果要是自己原本的链接上携带参数该怎么办，因为通过    "https://open.weixin.qq.com/connect/oauth2/authorize?” 授权登录之后其实是会将原本的链接进行重定向，一开始我想的办法是先将自己的参数进行存缓存的操作，如果你的参数只是作为判断项来说，其实存缓存也可以。如果你的参数是比较重要的参数，那么存缓存的方式明显是不可取的。那么该怎么办呢?

这个时候就用用到redirect_uri这个参数了，自己看文档就会发现，授权重定向之后，会把参数拼接到这个redirect_uri链接的后边 比如：www.baidu.com?code=hdfjhffs34dk。这个时候要注意，自己参数尽量不要用code,因为微信返回的也是code

如果这个时候不小心自己的参数也是code,那么接下来就可以用接下里的判断，多加一层判断。

如果response_type的参数可以修改为别的，那么就不用加这给判断，那样更加完美的解决问题。

if((data.name == null || data.name == "") && data.code !=null && data.code != ""){

    // 因为这里我链接上携带的参数与微信授权返回的参数code冲突了,那么就给他在原本的链接上将自己的参数改一个名字，（一般这个参数都是后端返回的那么要想不冲突就需要将才参数换一个名，使用window.location.origin 获取链接内容，再重新将值凭拼接到该链接上）
    window.location.href = window.location.origin+`?name=${data.code}`
    return
}

https://www.samanthaming.com/tidbits/?filter=JS#2
window.location.origin   → 'https://www.samanthaming.com'
               .protocol → 'https:'
               .host     → 'www.samanthaming.com'
               .hostname → 'www.samanthaming.com'
               .port     → ''
               .pathname → '/tidbits/'
               .search   → '?filter=JS'
               .hash     → '#2'
               .href     → 'https://www.samanthaming.com/tidbits/?filter=JS#2'

if (data.state == null || data.state === "") {  // 判断是否微信授权登录，因为state只有在微信授权成功之后才会拼接在地址上
      // 因为这里我链接上携带的参数与微信授权返回的参数code冲突了
       
        //不存在就打开上面的地址进行授权
        window.location.href =
            "https://open.weixin.qq.com/connect/oauth2/authorize?appid=" +
            appid +
            "&redirect_uri=" +
            encodeURIComponent(window.location.href) +
            "&response_type=code&scope=snsapi_userinfo&state=STATE#wechat_redirect";
      }else { }
      }

 总结：h5 获取微信公众号授权登录携带参数与授权登录返回的code冲突该如何解决，以下是完整代码

getWechatCode() {
      let appid = ''         //公众号的APPID
      // let data = this.getUrlCode(); //是否存在code
      console.log(this.$route.query)
      let data = this.$route.query   // 获取链接参数
      if (data.state == null || data.state === "") {  // 判断是否微信授权登录，因为state只有在微信授权成功之后才会拼接在地址上
      // 因为这里我链接上携带的参数与微信授权返回的参数code冲突了
        if((data.name == null || data.name == "") && data.code !=null && data.code != ""){
          window.location.href = window.location.origin+`?name=${data.code}`
          return
        }
        //不存在就打开上面的地址进行授权
        window.location.href =
            "https://open.weixin.qq.com/connect/oauth2/authorize?appid=" +
            appid +
            "&redirect_uri=" +
            encodeURIComponent(window.location.href) +
            "&response_type=code&scope=snsapi_userinfo&state=STATE#wechat_redirect";
      }else {
        console.log(data)
        // getToken() // 取出缓存中的参数， setToken() // 向缓存中存入token
        // 如果缓存中没有token ，调用登录接口，获取openid和token
        if(!getToken('Admin-Token')){
            // 调用登录接口获取token
          let res = await wxlogin({code:data.code})
          setToken(res.token)
        }
      }
    },