pc端实现微信扫码登录

pc端实现微信扫码登录

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

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

效果：

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

pc端实现微信扫码登录代码步骤

1.安装

npm install vue-wxlogin --save-dev

2.引用

 3.使用

APPID是你授权的公众号，scope固定snsapi_login就可以了，redirect_uri 是你扫码成功后要跳转的网址（在这个路由里记得加watch监听参数是否有code，下面写了代码的）记得转换一下编码，href就是你的css样式，将css的代码转换成bas64格式（到网上随便搜索一个在线转bas64的网站就OK了），或者一个在线css也行

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

  watch:{
    $route(to,from){
      
      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.$router.push({ path: '/user/my',query:{login:"success"}})
        }        
      })
    }
    }
  }

这样PC端使用vue-wxlogin

实现微信登录功能