微信二维码登录

￡神魔★判官ぃ 2022-12-22 04:49 173阅读 0赞

准备工作：（参考二维码登录指导文档）[https://developers.weixin.qq.com/doc/oplatform/Website\_App/WeChat\_Login/Wechat\_Login.html][https_developers.weixin.qq.com_doc_oplatform_Website_App_WeChat_Login_Wechat_Login.html]

下面直接上代码

login页面

<div class="QR_code" id="login_container">这个是二维码显示区</div>

// 这个链接是扫码之后跳转的一个空白页面，在这个空白页面做登录处理
    // appid和secret是向微信申请好
    mounted() { 
    	var url = encodeURIComponent('http://project.30days-tech.com/white')
        var obj = new WxLogin({ 
    	   	 id: 'login_container',
    	     appid: '',
    	     scope: 'snsapi_login',
    	     redirect_uri: url,
    	     state: 'STATE',
    	     style: 'black',
    	     href: '',
    	     response_type: 'code',
    	     secret: ''
        })	
    }

扫码之后跳转到white页面

// 跳进来这个页面之后马上执行下面的login函数
      methods: { 
        login() { 
          var url = document.URL;
          var theRequest = new Object();
          if (url.indexOf("?") != -1) { 
            var str = url.substr(1);
            var str1 = str.split("?");
            var strs = str1[1].split("&");
            for (var i = 0; i < strs.length; i++) { 
              theRequest[strs[i].split("=")[0]] = unescape(strs[i].split("=")[1]);
            }
            let params = { 
              code: theRequest["code"]
            };
            login(params).then(response => { 
              response.data = JSON.parse(JSON.stringify(response))
              if (response.data.resultStatus) { 
                localStorage.setItem(
                  "resultData",
                  JSON.stringify(response.data.resultData)
                );
                const accessToken = response.data.resultData.accessToken
                sessionStorage.setItem('accessToken', accessToken)
                this.$store.commit('UPDATE_USER_INFO', { 
                    nickname: response.data.resultData.nickname,
                    avatarUrl: response.data.resultData.avatar,
                    roleName: response.data.resultData.roleName,
                    rolePermissions: response.data.resultData.resources
                })
                window.location.href = "/#/home/index";
    
              } else {   
                console.log(response)
               this.$message.error(response.data.errorMessage)
                window.location.href = "/#/"
                
              }
            });
          }
        }
      },
        created() { 
        console.log("URL", document.URL);
        this.login();
      },
        watch: { 
        $route: "getUrlParam"
      },
      beforeRouteUpdate(to, from, next) { 
        console.log("扫码登录了", to.path);
        var url = document.URL;
        var theRequest = new Object();
        if (url.indexOf("?") != -1) { 
          var str = url.substr(1);
          var str1 = str.split("?");
          var strs = str1[1].split("&");
          for (var i = 0; i < strs.length; i++) { 
            theRequest[strs[i].split("=")[0]] = unescape(strs[i].split("=")[1]);
          }
          let params = { 
            code: theRequest["code"]
          };
    
          login(params).then(response => { 
            if (response.resultStatus) { 
              localStorage.setItem(
                "resultData",
                JSON.stringify(response.resultData)
              );
              window.location.href = "/#/home/index";
            } else { 
              console.log("扫码登录失败");
            }
          });
        }
        next();
      }

[https_developers.weixin.qq.com_doc_oplatform_Website_App_WeChat_Login_Wechat_Login.html]: https://developers.weixin.qq.com/doc/oplatform/Website_App/WeChat_Login/Wechat_Login.html