微信二维码登录

最新推荐文章于 2024-09-12 16:43:23 发布

a小毛同学

最新推荐文章于 2024-09-12 16:43:23 发布

阅读量623

点赞数

文章标签：前端 vue.js

本文链接：https://blog.csdn.net/mao871863224/article/details/109749182

版权

准备工作：（参考二维码登录指导文档）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页面

<div></div>

// 跳进来这个页面之后马上执行下面的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();
  }