大致流程

1. 在登录页面构建内嵌式登录二维码（这种方式好处：无需跳转到企业微信域下登录后再返回，提升企业微信登录的流畅性与成功率）
2. 扫二维码之后，微信那边会跳转到redirect_uri你重定向的地址，后面会拼接code参数，一般重定向地址都是本页面(这里指的是是登录页面)
3. 在本页面获取url后面拼接的code，用code去请求后台接口
4. 后台接口服务那边用access_token和code去获取用户的企业微信号
5. 通过企业微信号查找数据库中是否存在，存在返回用户的基本信息，否则不存在返回提示‘该用户非企业人员’

代码实现

public/index.html 引入js文件：

需要显示登录二维码的页面(这里指登陆页面)构建二维码及相关代码的实现：

显示二维码的容器：

实例化构建相关代码：

// 监听路有变化获取code参数值
watch: {"$route.query": {handler(newVal, oldVal) {console.info(newVal, oldVal);this.authCode = this.$route.query["code"];this.authCode && this.getStaffInfo(); //获取到code，调用后端接口换取token},deep: true,immediate: true,},
},mounted() {this.initCode();
},methods: {// 构造实例initCode() {new WwLogin({id: "wx_qrcode",// [appid] 企业微信的CorpID，在企业微信管理端查看appid: "xxxxxxxxxxxxxx",// [agentid] 授权方的网页应用ID，在具体的网页应用中查看agentid: "xxxxxx",// [redirect_uri] 重定向地址，需要进行UrlEncoderedirect_uri: encodeURIComponent("https://xxxx.com/#/login"),// [state] 用于保持请求和回调的状态，授权请求后原样带回给企业。// 该参数可用于防止csrf攻击（跨站请求伪造攻击），建议企业带上该参数，可设置为简单的随机数加session进行校验state: Date.now() + "xxxxxxxxxxxxxxxxx",	//这里可使用上面appid// [href] 自定义样式链接，企业可根据实际需求覆盖默认样式href: "https://xxxx.com/wxCode/wxQrcode.css",});},// 企业微信扫码登录getStaffInfo() {this.$store.dispatch("wxLogin", { authCode: this.authCode })	//wxLogin 是store里写的请求后台接口的actions 实现名字.then(() => {this.$router.push({ path: "/" });}).catch((err) => {//这行代码一定要写，不然扫码登录失败后，刷新页面话会重复登录报提示错误this.$router.push({ path: "/login" });	this.$message({showClose: true,message: err,type: "error",});});},
}

store里扫码登录请求后台接口的实现：

// 引入登录请求接口
import { providerLogin } from '@/api/login/login'actions: {// 企业微信登录wxLogin({ commit }, authCode) {return new Promise((resolve, reject) => {providerLogin(authCode).then(res => {if (res.data.code == 200) {// 下面几行代码是存储登录成功后的相关信息，与此次无关，相关代码就不展示了commit('SET_TOKEN', res.data.data.token);commit('SET_EXPIRESAT', res.data.data.expiresAt);commit('SET_USERINFO', res.data.data.user);setToken(res.data.data.token, new Date(res.data.data.expiresAt));setExpires(res.data.data.expiresAt, new Date(res.data.data.expiresAt));setUserInfo(res.data.data.user, new Date(res.data.data.expiresAt));resolve();} else {reject(res.data.msg);}}).catch(error => {reject(error);})})},
}

请求接口api封装：

// 企业微信登录
export function providerLogin(data) {return request({url: '/admin/base/providerLogin',method: 'post',data})
}

效果图

注意：效果图也可以自定义，使用登录实例js代码里的href字段，里面写你自定义样式文件服务器的位置路径，为了防止项目打包导致样式文件位置无法获取，位置最好放在在项目中public文件夹下，如下图所：（只支持https协议的资源地址）

基本上就这些了，该说的也差不多了，还有疑问的小伙伴可以在评论区咨询我，看到留言会回复的~

具体企业微信内部登录相关文档请查看：企业微信扫码授权登录