网页授权与APP授权，H5开发使用微信Jssdk拉起网页授权详细步骤（vue2）_微信网页授权api

先看微信开发文档步骤：

1 第一步：用户同意授权，获取code

2 第二步：通过code换取网页授权access_token

3 第三步：刷新access_token（如果需要）

4 第四步：拉取用户信息(需scope为 snsapi_userinfo)

5 附：检验授权凭证（access_token）是否有效

6 调用频率限制

我的代码流程如下（在HOME.VUE或者App.vue文件里）：

1.首先需要下载

npm i   weixin-js-sdk 

2.在项目中引用后，在如下先操作（在vue的created里面拿到后端返回的时间戳）：

我这边权限签名，时间戳和随机串是后端更具微信的权限签名算法生成的，微信算法链接如下

概述 | 微信开放文档

let url = location.href;
    // //获取timestamp和nonceStr
    axios
      .get("https://api/wx/jssk", { params: { url } })
      .then((res) => {
        //获取时间戳，和签名
        if (res.status == 200) {
          this.nonceStr = res.data.nonceStr;
          this.timestamp = res.data.timestamp;
          this.signature = res.data.signature;
        }
      });

3.在项目中引用后，在如下进行微信得初始化操作：

initWechatJS() {
            let { nonceStr, timestamp, signature } = this
            // 初始化微信JS-SDK配置
            wx.config({
                debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
                appId: '', // 必填，公众号的唯一标识
                timestamp: timestamp, // 必填，生成签名的时间戳
                nonceStr: nonceStr, // 必填，生成签名的随机串
                signature: signature,// 必填，签名
                jsApiList: [] // 需要使用的微信JS-SDK接口列表
            });
        },

4.初始化完成后进行如下操作

根据code做判断，如果url里截取到code就代表登录过，不在拉起弹框授权

 //微信网页授权
    authorizeLogin() {
      if (isWechat) {
        //判断是否是微信
        let uuid = localStorage.getItem("uuid"); //拿到本地存储的uuid，没用就拉起授权，这里用本地存储做判断的原因是解决进行之后页面加载两次
        if (uuid == "" || uuid == null || uuid == undefined) {
          let code = this.getUrlCode().code; //拿到截取的code
          let redirect_uri = urlencode(window.location.href);
          let appid = "";//公众号的唯一标识
          let wx_url = `https://open.weixin.qq.com/connect/oauth2/authorize?appid=${appid}&redirect_uri=${redirect_uri}&response_type=code&scope=snsapi_userinfo&state=STATE#wechat_redirect&connect_redirect=1`;
          if (code == null || code === "") { //在对拿到的code做判断
            window.location.href = wx_url;
          } else {
            this.getOpenid(code);
          }
        }
      }
    },

截取code得方法

  // 截取url中的code方法
        getUrlCode() {
            var url = location.search;
            var theRequest = new Object();
            if (url.indexOf("?") != -1) {
                var str = url.substr(1);
                var strs = str.split("&");
                for (var i = 0; i < strs.length; i++) {
                    theRequest[strs[i].split("=")[0]] = strs[i].split("=")[1];
                }
            }
            return theRequest;
        },

5.获取到code后需要获取用户的openid

注意点：这一步操作需要将请求微信的接口放到后端，前端进行调用，否则会出现跨域现象

//获取openid
        getOpenid(code) {
            axios.get(`/wx/getUrl`, { params: { code } }).then(res => {
                let openid = res.data.openid //获取到openid
                let access_token = res.data.access_token //获取到token
                if (openid, access_token) {
                    sessionStorage.setItem('uuid', openid)
                    this.getUserApi(openid, access_token)
                    this.getFindisUserApi()
                }
            }).catch(error => {
                console.log(error);
            })
        },

6.获取到openid和access_token就可以走到最后一步获取用户信息（公众号获取用户信息，只有微信头像，openid和昵称）这一步同样要放到后端进行，前端调用接口形式请求

 //微信获取用户信息
    getUserApi(openid, token) {
      axios
        .get(`https://api/wx/info`, {
          params: { openId: openid, token: token },
        })
        .then((res) => {
          console.log("用户授权登录信息", res);
          localStorage.setItem("imgUrl", res.data.headimgurl);
        })
        .catch((error) => {
          console.log("用户授权登录信息错误返回", error);
        });
    },

接下来还需要在微信公众号平台进行一些基础配置

公众号配置（参考以下链接内容）：

http://t.csdnimg.cn/Y1U6d

到现在一整套流程就走完了~

本人亲测是可以实现的~

如有不对望指正~