美文网首页
实现页面新窗口微信扫描登录后关闭新窗口并刷新页面登录

实现页面新窗口微信扫描登录后关闭新窗口并刷新页面登录

作者: AAA前端 | 来源:发表于2020-07-10 12:35 被阅读0次
    • 看到知乎微信扫描登录,会先打开新窗口。然后扫描完成后,新窗口会关闭,原来的窗口会刷新,并登录完成。(但是看知乎没有发起websocket监听)

    1、由于本公司是调用接口获取微信扫描地址(后面服务器会拼接上微信回跳地址)

    async loginWxFn() {
          let redirectUrl = await this.getChangedUrl() // 传递给接口,需要回跳的当前地址
          this.$request.get(api.pcAuth_api, { redirectUrl }).then(res => {
            var owurl = res // 获取微信扫描登录地址
            var tmp = window.open('about:blank', '', 'fullscreen=1', false)
            tmp.moveTo(0, 0) //指定窗口开始位置(左上角)
            tmp.resizeTo(1024, 720) //指定窗口结束位置(右下角)
            tmp.focus()
            tmp.location = owurl
          })
        },
    

    2、扫描登录成功后,微信会跳转回跳地址并且拼接上code到新窗口中。由于新窗口和原来窗口都是同一个页面代码。所有在created里面判断是否有code,如果有code则是微信跳转过来。然后判断window.opener是否存在,存在则当前窗口是新窗口。原来窗口地址替换为有code的url,并且关闭新窗口。

     async getCodeLogin() {
          const code = this.$route.query.code
          if (code) {
            if (window.opener) {
              window.opener.location.replace(location.href)
              window.close()
              return false
            }
       // 原来窗口打开,走微信code 传递给接口登录逻辑
    }
    
    • 以上是自己猜测方法。并且试验成功。

    相关文章

      网友评论

          本文标题:实现页面新窗口微信扫描登录后关闭新窗口并刷新页面登录

          本文链接:https://www.haomeiwen.com/subject/nbapcktx.html