- 企业微信扫码登陆官方文档
- 采用的是第一种(构造独立窗口登录二维码)
- 对于前端来说就步骤就是 页面展示二维码 => 用户扫码登陆点击确定 => 确定之后重定向自己配置的路径 => 企业微信会返回一个code => 前端截取code传给后台换取token ,话不多说上代码。
- 在其login页面
<template>
<div class="login">
<section class="code-login">
<div class="login-way">
<div>
<span class="weixin"></span>
<span>企业微信扫码登录</span>
</div>
</div>
<iframe :src="wechatUrl" frameborder="0" scrolling="no" width="100%" height="100%"
id="wx_reg">
<p>您的浏览器不支持 iframe 标签。</p>
</iframe>
</section>
</div>
</template>
<script>
import { loginTf } from '../../api/login';
export default {
data() {
return {
wechatUrl: 'https://open.work.weixin.qq.com/wwopen/sso/qrConnect?appid=你的id&agentid=1000002&redirect_uri=http%3A%2F%2F127.0.0.1%3A8080%2Flogin&state=23423ess'
};
},
created() {
let code = sessionStorage.getItem('code');
if (code) {
loginTf({ 'code': code, 'state': '后台需要传的值'}).then(res => {
if (res.b === 1) {
let token = res.o;
localStorage.setItem('token', token);
this.$router.replace('/index')
} else {
this.$router.push('/login');
if (res.data.ec[0]) {
errorMsg = res.data.ec[0];
} else {
errorMsg = '未知错误';
}
this.$message({ message: errorMsg, type: 'error', center: true });
}
}).catch(msg => {
this.$message({ message: '系统异常', type: 'error', center: true });
});
}
},
methods: {
},
};
</script>
<style lang="less" scoped>
<!-- 样式省略 -->
</style>
- 我是在mian.js当中,也可在router中
router.beforeEach((to, from, next) => {
if (window.location.href.indexOf('code') >= 0) {
let code = window.location.href.split('?')[1];
code = code.substring(5, code.indexOf('&'));
sessionStorage.setItem('code', code);
next();
} else {
if (to.path === '/login') {
localStorage.removeItem('token');
}
if (!localStorage.getItem('token') && to.path !== '/login') {
next({ path: '/login' });
} else {
next();
}
}
if (to.meta.title) {
document.title = to.meta.title;
}
});