本方式是用 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("认证失败,请联系管理员!");
}
}
},
end! 如果觉得对你有帮助,请点个赞呗,谢谢。