pc端实现微信扫码登录

pc端实现微信扫码登录

流程：使用vue-wxlogin组件当我们打开微信扫一扫，此时二维码组件会有变化，显示扫描成功

 我们的手机就会弹出一个授权页面。记住让后端绑定一个微信公众，通过授权该公众就可以了

效果：

当点击同意之后，网站就会重定向一个链接，这个code的值是后端给的，前端监听路由变化，就可以拿到code，通过接口就可以获取到微信信息，从而实现微信授权登录

实现pc端实现微信扫码登录

1.安装

npm install vue-wxlogin --save-dev

2.引用

 3.使用

APPID是你授权的公众号，scope固定snsapi_login就可以了，redirect_uri 记得转换一下编码，href就是你的css样式，将css的代码转换成bas64格式（到网上随便搜索一个在线转bas64的位置就OK了），或者一个在线css也行

<wxlogin :appid="appid" :scope="scope" :redirect_uri="encodeURIComponent(redirect_uri)"
            href="data:text/css;base64,LmltcG93ZXJCb3ggLnRpdGxlIHsKCiBkaXNwbGF5OiBub25lOwoKfQoKLmltcG93ZXJCb3ggLnN0YXR1cy5zdGF0dXNfYnJvd3NlciB7CgogZGlzcGxheTogbm9uZTsKCn0KCi5pbXBvd2VyQm94IC5xcmNvZGUgewoKIGJvcmRlcjogbm9uZTsKCiB3aWR0aDogMjgwcHg7CgogaGVpZ2h0OiAyODBweDsKCn0KCi5pbXBvd2VyQm94IC5zdGF0dXN7CgogZGlzcGxheTogbm9uZQoKfQ=="
            ></wxlogin>

监听URL的变化，如果URL有code参数，说明登录了，。然后调用后端接口

  watch:{
    $route(to,from){
      this.dia2=false
      let code=this.$route.query.code
    if(code){
      console.log(code)
//通过URL的code，调用后端写的接口，接口才会返回用户登录的信息，和微信h5登录一样的模式
      userAuthAPI({code}).then(res=>{
        localStorage.setItem("aa",JSON.stringify(res.data))
        if (res.data.is_bind==0) {
          localStorage.setItem("wxInfo",JSON.stringify(res.data))
          this.$router.push({ path: '/updateInfo'})
           this.dia=false
        } else {
          	localStorage.setItem("token", res.token)     
            this.dia=false
            this.$router.push({ path: '/user/my',query:{login:"success"}})
        }        
      })
    }
    }
  }

这样PC端使用​​​​​​​vue-wxlogin

实现微信登录功能