微信公众号H5网页微信授权登录

做的过程中是真的崩溃。各种不应该出错的地方！所以记录一下。

微信公众号网页授权

https://developers.weixin.qq.com/doc/offiaccount/OA_Web_Apps/Wechat_webpage_authorization.html

首先前端去获取code(code是获取access_token,openId的唯一凭证，临时的，有5分钟的有效期)，这时把code传给后端，请求后端接口，获取openId以及用户信息等等如微信用户名、微信用户头像。（后端拿着前端传过来的code,去请求微信接口，最后把用户信息返回给前端）前端拿到这些数据去做判断渲染到用户界面上。你以为这样就完事了。no,这只是个开始！拿到openId,最好储存起来，以便用户下次操作，带上openId当做token传给后端,请求相应的业务逻辑接口。如自动登录功能的实现。

1.准备工作

   1.1   限制当前页面只能在微信内置的浏览器打开，下面有封装好的方法，拿去用，不用谢！

      1.1.1   判断浏览器的类型

 is_weixin() {
                var ua = navigator.userAgent.toLowerCase(); //判断浏览器的类型
                if (ua.match(/MicroMessenger/i) == "micromessenger") {
                    return true;
                } else {
                    return false;
                }
            },

       1.1.2   调用封装好的is_weixin方法

  if (!this.is_weixin()) { // 如果不是微信内置浏览器，就动态跳转到以下页面
           window.location.href = 'https://open.weixin.qq.com/connect/oauth2/authorize?appid=wxdf3f22ebfe96b912&redirect_uri=xxx&response_type=code&scope=snsapi_base&state=hyxt#wechat_redirect';//不是就跳转提示页面
         }

2.引导用户进入微信授权页，用户点击允许后，微信回调到用户操作页面

   2.1 这里的域名及url各种参数是写死的，之前的思路是前端获取当前路由路径，然后带上当前路由路径请求后端接口。这时后端会返回一个引导用户授权的url返回给前端，由前端链接到微信授权页面。（这个思路可以给你们参考参考）

   2.2 一开始我是用axios请求url,后来发现不行。搞过微信授权的人应该知道，官方的地址里有一个参数redirect_url,这个参数当微信授权成功后，会回调到你写的redirect_url里。这里应该使用同步方法去调用

 //登录功能
            loginHandle() {
             /*   let currentPath = this.$route.path;  //当前路由地址
                console.log(currentPath)
                let url = '';  //请求微信接口获取coed
                let code = ''; //code临时凭证
                //拉取微信授权  */
                //拉取微信授权页面   请求微信接口获取code
                window.location.href ='https://open.weixin.qq.com/connect/oauth2/authorize?appid=wx51e964f914f31cae&redirect_uri=http%3A%2F%2Ffankuan.shengzhouchuang.com%2FreturnMy&response_type=code&scope=snsapi_userinfo&state=login&connect_redirect=1#wechat_redirect';
          
            },

 

3.前端获取code,并使用cookie存储code

   3.1 单纯去当前微信回调地址里截取code，这个地方是真的坑，对于新手我来说。首先去网上找了工具类方法，没办法，个人能力有限。调用相应的截取code方法，应该放在vue路由的实例方法，beforeEach(to ,from,next)。我理解的是每次微信授权成功后，都会回调到当前路由页面，在整个路由跳转之前就去获取code，并存储到cookie里。为什么要存储到cookie里，这是因为前端要判断当前路由页面是用户点进来的，还是授权成功后微信回调过来的。在各自领域里做不同的操作。

  let openID=getCookie('openId')  //从浏览器里获取openId
    if (openID){//如果openID存在，说明已登录过
        next(); //继续下一步操作
    }else {//否则引导用户进行微信授权
        //微信授权后，从微信的回调地址中截取code
        let code = getUrlParam("code");
        if (code != null) {//微信回调的页面
            setCookie('code',code,3600);//openId过期时间1小时
        }
    }

4.请求后台接口，带着code,获取openId。

   4.1  如果openId已存在，说明用户以前登录过。这时从cookie里取出openId。请求后台接口，获取用户信息。

   4.2  如果openId不存在，说明用户第一次登录。这时带着code去请求后台接口，获取opnenId。同一时间，带上openId,请求后台接口，获取用户信息。（登录操作只需带着code去请求后台接口，在获取opnenId的同时也会有用户信息。如果是其它业务操作，我这样边是需要再次请求后台接口。具体可自行判断。）

              let code= getCookie('code');  //从浏览器里获取code
              let openId = getCookie('openId');  //从浏览器里获取openID
              if (openId) {//判断cookie中是否有openId,若有,携带openId请求此接口获取用户信息,若没有,不执行任何操作
                axios.post('/wx/getUserInfo', {
                    openId: openId
                }).then((res) => {
                    this.userInfo = res.data  //获取用户信息
                })
            }else{
                if(code){ //存在code,请求后端接口，获取openId、用户信息
                    axios.post('/wx/getOpenIdByCode',{
                        code:code
                    }).then((res)=>{
                        this.userInfo=res.data; //获取用户信息
                        setCookie('openId',this.userInfo.openId,3600); //1小时的过期时间，
                    })

                }
            }

5.前端拿到用户信息，渲染到界面

  5.1 有句话说，越到最后阶段，越要谨慎。靠，小编花了一个下午的时间去修改axios读数据的bug。这个bug，都不算是bug,一个很简单的问题。没发现。巨坑！小编就不说是什么问题了，小编还是要点脸的。啪啪啪，小编的脸没了。

 生活不易，且行且珍惜。小编最近已被老板的项目需求搞得心力憔悴。这不，项目需求又来了！好了，本文到此结束。