react + antDesignPro 企业微信扫码登录

效果

实现步骤

1、项目中document.ejs文件引入企微js链接

注意：技术栈是使用的react + antDesignPro，不同的技术栈有不同的入口文件（如vue在html文件引入）

<script src="https://wwcdn.weixin.qq.com/node/wework/wwopen/js/wwLogin-1.2.7.js"></script>

2、在登录页面放置二维码容器

<div id="ww_login"></div>

3、在登录页面生成二维码

注意：目前项目需求为进入页面就展示二维码，所以在React的useEffect中进行生成的，如果有其它交互可通过其它交互进行动态生成二维码

useEffect(() => {new WwLogin({id: 'ww_login',appid: 'wwa2d9444d52111111',agentid: '1000000',redirect_uri: encodeURIComponent('http://oa.zzmjart.com/user/login'),state: Date.now() + '1000000',});
}, []);

4、扫码完成后监听路由，处理登录逻辑

注意：目前跟后端约定交互为扫完二维码后跳转项目登录页面，登录页面路由上会拼接code，前端监听路由query里面是否有code，如有code拿到code去调后端接口换取token，后端返回token后进行储存token/跳转页面

import { history } from 'umi';useEffect(() => {if (history?.location?.query?.code) {qwLogin(history?.location?.query);}
}, [history]);const qwLogin = async (values) => {try {const msg = await cpLogin({ code: values.code });if (msg.code === 200) {message.success('登录成功！');localStorage.setItem('token', msg.data.token);const redirect = localStorage.getItem('redirect');if (redirect) {localStorage.setItem('redirect', '');location.href = location.origin + decodeURIComponent(redirect);} else {location.pathname = '/';}return;}console.log(msg); // 如果失败去设置用户错误信息} catch (error) {message.error('登录失败，请重试！');}
};

注：本人前端小白 ，如有不对的地方还请多多指教