微信公众号h5项目的无感登录，避免code重复使用的解决方案

1、首先我们查看微信网页开发/网页授权

截图：

官网链接：网页授权 | 微信开放文档

2、h5项目中写得无感登录方法如下，什么时候去调取登录根据业务需求加上，以及跟后端协商返回的字段加上登录就可以了

var loginFlag = false;

async function newlogin() {

  console.log("进没进登录");

  let pageUrl = window.location.href;

  console.log("第一次pageUrl", pageUrl);

  let redirect_uri = encodeURIComponent(pageUrl);

  console.log("redirect_uri", redirect_uri);

  const authUrl = `https://open.weixin.qq.com/connect/oauth2/authorize?appid=${APPID}&redirect_uri=${redirect_uri}&response_type=code&scope=snsapi_userinfo&state=STATE&connect_redirect=1#wechat_redirect`;

  const code = getQueryString("code");

  console.log("cade0000", code);

  if (code) {

    let res = {};

    res = await login({ code });

    console.log("=====================", pageUrl, res);

    const token = res.data.autograph;

    uni.setStorageSync("token", token, res);

    loginFlag = false;

    uni.navigateBack();

  } else {

    window.location.href = authUrl;

    return await Promise.reject("跳转授权");

  }

}

function getQueryString(name) {

  let reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");

  let r = window.location.search.substr(1).match(reg);

  if (r !== null) return unescape(r[2]);

  return null;

}

这里的appid为自己项目申请的appid，loginFlag字段是做的开关，避免前端重复去调取登录，拿到code值就不用再去重复登录，就不会出现code值被重复使用的问题，因为授权成功以后，访问的项目链接会被自动带上code字段，就会报出code已被使用的情况

3、我这个项目的业务逻辑是后端返回401就需要前端重新登录，所有这里的loginFlag字段是这样使用的，代码如下：

if (res.data.code == 401) {

          console.log("强制跳转登录", loginFlag);

          if (!loginFlag) {

            loginFlag = true;

            newlogin();

          }

          // rejected('not login')

        }