Vue 前端对接第三方平台扫码登录（Oauth2）

本方式是用 Oauth2 的方式实现扫码登录的，其中省略了不少不重要的代码

1、编写页面样式，设置扫码链接入口

1、页面样式不多说，参考一下：

        <el-dropdown>
          <span class="el-dropdown-link" style="color: #1890ff">
            第三方登录<i class="el-icon-arrow-down el-icon--right"></i>
          </span>
          <el-dropdown-menu slot="dropdown">
            <div class="foot_other_login">
                     <!-- 微软 -->
              <a @click="showOauthModal('microsoft')">
                <img src="../assets/icons/MICROSOFT.png" />
              </a>
                     <!-- 微信 -->
              <a @click="showOauthModal('wechat_enterprise')">
                <img src="../assets/icons/WECHAT_ENTERPRISE.png" />
              </a>
                     <!-- 钉钉 -->
              <a @click="showOauthModal('dingtalk')">
                <img src="../assets/icons/DINGTALK.png" />
              </a>
            </div>
          </el-dropdown-menu>
        </el-dropdown>

2、在 src 下的 settings.js 中存放后台链接地址：

module.exports = {
   // 社交登录后台地址
  socialLoginUrl: `http://localhost${process.env.VUE_APP_BASE_API}/oauth`,
}

2、 实现扫码登录

1、页面上编写处理函数进行扫码登录：

    // 跳转扫码登录页面：
    showOauthModal(oauthType) {
        //不同的访问地址
      const url = `${this.socialLoginUrl}/${oauthType}/login/login`;
      console.log(url);
      window.open(
        url,
        "newWindow",
        `resizable=yes, height=${this.page.height}, width=${this.page.width}, top=10%, left=10%, toolbar=no, menubar=no, scrollbars=no, resizable=no,location=no, status=no`
      );
        //监听后台传过来的message消息
      window.addEventListener("message", this.resolveSocialLogin, false);
    },

2、监听扫码后传回的参数进行相应的处理 ：

// 监听参数并处理：
    resolveSocialLogin(e) {
      console.log(e);
      if (e.data) {
        const data = e.data;
        console.log(data);
        const that = this;
        if (data.BindType === "not-bind") {
          that.msgError("您尚未绑定账号，登录账号后即可自动绑定！");
          that.bindLogin = true;
          that.loginText = "绑定并登录";
          that.loginForm.authUser = data.authUser;
        } else if (data.BindType === "bind") {
          setToken(data.token);
          that.$store.dispatch("LoginSocia", data.token);
          this.msgSuccess("登录成功");
          that.$router.push({ path: that.redirect || "/" }).catch(() => {});
        } else {
          that.msgError("认证失败，请联系管理员！");
        }
      }
    },

参考地址：FEBS Cloud: 基于Spring Cloud Hoxton.RELEASE、Spring Cloud OAuth2 & Spring Cloud Alibaba & Element 微服务权限系统，开箱即用。预览地址： (gitee.com)https://gitee.com/mrbirdd/FEBS-Cloud

end！        如果觉得对你有帮助，请点个赞呗，谢谢。