微信扫码登录VUE前端代码


今天要说的是微信扫码登录的方式,这里以VUE为例

首先我们需要去微信开放平台申请网站应用。

https://open.weixin.qq.com/

申请完,我们能拿到这个应用的APPID,注意这里的APPID并不是公众号的APPID

第一步:获取code

//REDIRECT_URI需要使用encodeURIComponent编码
//https://open.weixin.qq.com/connect/qrconnect?appid=APPID&redirect_uri=REDIRECT_URI&response_type=code&scope=SCOPE&state=STATE#wechat_redirect 
toWxLogin () {
 let url = encodeURIComponent(window.location.href.split('#')[0] + '#/wxLogin')
  //scope = snsapi_login 
 let str = 'https://open.weixin.qq.com/connect/qrconnect?appid=' + this.$store.state.openAppid + '&redirect_uri=' + url + '&response_type=code&scope=snsapi_login&state=STATE#wechat_redirect' 
 window.location.href = str
}     

第二步:把code带上请求后台接口,此处请移步至《微信扫码登录后端代码

//微信地址会跳转到目标页面带上一个code参数,在wxLogin页面获取,我们在created生命周期中获取code
created () {
    let code = this.$route.query.code
    if (code) {
      //调用登录方法,带上code
      this.wxLogin(code)
    }
}

//这是前段微信登录的方法
async wxLogin (code) {
      let res = await this.$api.login.wxLogin(code)
      if (res.code && res.code === -1) {
        this.$Message.error(res.msg)
        setTimeout(() => {
          this.$router.push('/login')
        }, 1000)
      } else {
        this.$store.commit('updateUser', res)
        this.$Message.success('登陆成功')
        setTimeout(() => {
          this.$router.push('/')
        }, 1000)
      }
    }
KK资源网分享最优质的的资源,涵盖网站建设、IT技术、主题源码
KK资源吧 » 微信扫码登录VUE前端代码

发表评论