Vue 微信公众号全局授权 + openid + access

公众号获取openid的流程
1、获取code：前端先获取当前地址，传给api，api拿到你的当前地址,通过微信提供的接口，返回一个拼接上参数(appid,redirect_uri…)的微信端授权地址，这时候前端跳转该地址显示微信授权页面，用户授权之后携带code跳转到当前页。
2、获取openid：截取地址获取code传递给API，API拿着code向微信服务器请求，获取access_token和openod
3、API端携带access_token再次请求微信服务器，获得用户头像和昵称。并将其存到数据库和缓存，返回token

main.js中做路由拦截

router.beforeEach((to, from, next) => { 
  const token = localStorage.getItem('token')  
  const openid = localStorage.getItem('openid')   
  if (!openid && !token) {
    if (to.path === '/auth') { 
      next()
    } else {  
      localStorage.setItem('now_url',to.fullPath) //当前页url与参数放入缓存
      next('/auth')
    } 
  } else { 
    next()
  }
}) 

授权页面

<script>
const murl = 'http://www.xx.com';
const url = localStorage.getItem("now_url");

export default {
  //生命周期函数
  created() {
    const code = this.GetUrlParame('code') // 截取code  
    if (!code) {
      var domine = window.location.href.split("#")[0]; // 微信会自动识别#    并且清除#后面的内容
      //这里的axios是已封装过的
      this.http
        .get("/set_wxcode_url?url=" + domine) // 如果没有code，说明用户还没授权   将当前地址传递给后台
        .then(res => {
          window.location.href = res.data;
        });
    } else {
      this.http.get("/gzh_token?code=",{code:code}) //如果有code，说明用户点击了授权  将获取到的code传递给后台
        .then(res => {
          // 返回状态和UId
          console.log(res.data);
          if (res.data.token) { 
            localStorage.setItem("token", res.data.token);
          }
          if (res.data.openid) { 
            localStorage.setItem("openid", res.data.openid);
          }
          window.location.replace(murl+'/#' + url);
        });
    }
  },
  data() {
    return { 
    };
  },
  methods:{
     // 截取code
    GetUrlParame (parameName) {
      /// 获取地址栏指定参数的值
      /// <param name="parameName">参数名</param>
      // 获取url中跟在问号后面的部分
      var parames = window.location.search
      // 检测参数是否存在
      if (parames.indexOf(parameName) > -1) {
        var parameValue = ''
        parameValue = parames.substring(parames.indexOf(parameName), parames.length)
        // 检测后面是否还有参数
        if (parameValue.indexOf('&') > -1) {
          // 去除后面多余的参数, 得到最终 parameName=parameValue 形式的值
          parameValue = parameValue.substring(0, parameValue.indexOf('&'))
          // 去掉参数名, 得到最终纯值字符串
          parameValue = parameValue.replace(parameName + '=', '')
          return parameValue
        }
        return ''
      }
    } 
  }
};
</script>