VUE微信授权登录

写在前面~

1. 一般正常的授权时，用户在第二次进来，需要做用户是否授权的判断，不然页面会重复出现登录状态。如果没有授权就需要去进行授权登录了。
2. OpenID 对于多平台来说不是唯一值，UnionID是绝对唯一的。比如当这个用户在公众号网页里面去授权登录之后，当前用户的openid为1，那么这个用户再去登录与这个公众号有关联的小程序，那么小程序的授权登录后，openid为2。两个平台能识别同一个用户就要用到unionid,这个值是相同的。（自己理解的）

  //第一部分
  //如果授权登录成功之后，将openid存在缓存中，下次在进入页面要判断是否存在openid。如果没有openid就走第二部分，否则就正常执行~
  //这一部分就不写了

  //第二部执行方法(要判断是不是重定向回来的页面)
  appif() {
    let _this = this;
    const AppId = "wxxxxx232323dfdfdf";//AppId 是每个公众号都有的
        //如果当前页面是重定向回来的地址，那么地址中是会有code值的
    let appIdCode = utilFun.geturlp("code");//utilFun.geturlp方法为 取地址栏中名字为code的内容
    if (appIdCode != null) {
        //存code
        localStorage.setItem("takeFoodCode", appIdCode);
        _this.code = localStorage.getItem("takeFoodCode");//输出
    }
       //这一块开始判断，当前用户是否授权登录过，以缓存中是否有code值
    _this.code = localStorage.getItem("takeFoodCode");
    if (_this.code != null) {
        console.log('code不为空')
                //这个时候code不为空，就可以拿code去和后端换取用户的openid了~
        _this.appidFun();
    }else{
        //进行用户的登录授权操作
        const formalUrl = 'http://www.www.cn/mall/';//微信授权登录之后 重定向页面地址（登录之后微信那边跳转回来的地址）
        const  url_oauth2 = "https://open.weixin.qq.com/connect/oauth2/authorize" //微信授权登录的地址
        _this.redirect_uri = encodeURIComponent(formalUrl);//对重定向地址处理一下
                //以下为微信授权登录过程中，需要拼接的地址，官方文档上面有具体内容
        url_oauth2 = url_oauth2 + "?appid=" + AppId + "&redirect_uri=" + this.redirect_uri + "&response_type=code&scope=snsapi_userinfo&state=1#wechat_redirect";
        window.location.replace(_this.url_oauth2);
    }
  },


  //第三步-用code换取用户的openid
  async appidFun() {
    let _this = this;
    const openidUrl = 'https://接口';
    let dataCode = {
        authCode: _this.code
    };
    const res= await this.$axios(openidUrl, dataCode);
    if(res.data == "000000"){
        _this.openId = res.data.openId;
        localStorage.setItem("userOpenId", _this.openId); //存入 参数： 1.调用的值 2.所要存入的数据
        _this.openId = localStorage.getItem("userAppId");//输出
        console.log('获取到openid了~')  //然后执行同第一部分，用户缓存存在openid之后，执行相同的事件即可。

    }
  }

大概这个样子~
存个记录~
溜了~
~~