微信公众号h5授权获取用户信息

hooks写方法

import store from "../store/index";
import {
  getWxAccessToken,
  refreshWxAccessToken,
  getWxUserMessage,
} from "../api/auth";

//微信授权
export function getWxToken(getUser) {
  store.commit("setGetAccessToken", false);
  const code = new URLSearchParams(window.location.search).get("code");
  console.log("code--------", code);
  // 检查是否有code
  if (code) {
    // console.log("通过code换取网页授权access_token");
    getAccessToken(code, getUser);
  } else {
    getCode();
    // console.log("用户同意授权，获取code");
  }
}

// 第一步：用户同意授权，获取code
function getCode(newUrl) {
  store.commit("setGetcode", false);
  let url = window.location.href;
  const getCodeUrl = `https://open.weixin.qq.com/connect/oauth2/authorize?appid=wx664763bf6551b6c5&redirect_uri=${encodeURIComponent(
    newUrl ? newUrl : url
  )}&response_type=code&scope=snsapi_userinfo&state=STATE#wechat_redirect`;
  window.location.href = getCodeUrl;
}

// 第二步：通过code换取网页授权access_token
function getAccessToken(code, getUser) {
  let url = window.location.href;
  let local = location.origin;
  getWxAccessToken({ code: code }).then((res) => {
    if (store.getters.isGetcode) {
      let path = url.substring(url.indexOf("#/"));
      let newUrl = local + "/" + path;
      getCode(newUrl);
    } else {
      // 保存用户凭证
      localStorage.setItem("access_token", res.data.access_token);
      localStorage.setItem("openid", res.data.openid);
      localStorage.setItem("refresh_token", res.data.refresh_token);
      if (getUser) {
        getUserMessage();
      }
    }
  });
}

//  第三步：刷新access_token（如果需要）
function refreshAccessToken() {
  store.commit("setGetRefreshToken", false);
  refreshWxAccessToken().then((res) => {
    //  如果刷新access_token失败就重新获取code
    if (store.getters.isGetAccessToken) {
      getWxToken("getUser");
    } else {
      localStorage.setItem("access_token", res.data.access_token);
      localStorage.setItem("openid", res.data.openid);
      localStorage.setItem("refresh_token", res.data.refresh_token);
      getUserMessage();
    }
  });
}

// 第四步：拉取用户信息(需scope为 snsapi_userinfo)
export function getUserMessage() {
  getWxUserMessage().then((res) => {
    // 如果失败就重新获取access_token
    if (store.getters.isGetRefreshToken) {
      refreshAccessToken();
    } else {
      const data = {
        headimgurl: res.data.headimgurl,
        nickname: res.data.nickname,
      };
      store.commit("setUserInfo", data);
    }
  });
}

封装请求，存一些状态

if (res.code === 1007) {
      store.commit("setGetcode", true);
    } else if (res.code === 1008) {
      store.commit("setGetAccessToken", true);
    } else if (res.code === 1009) {
      store.commit("setGetRefreshToken", true);
    }

vuex

      isGetcode: false, //是否获取code
      isGetAccessToken: false, //是否获取access_token
      isGetRefreshToken: false, //是否刷新access_token

main.js

  // 不存在openid access_token 重新获取,调用kooks里的getWxToken
  if (
    !localStorage.getItem("openid") ||
    !localStorage.getItem("access_token")
  ) {
    getWxToken();
  }