vue3 钉钉扫码登录 最新解决方案
主要是使用方法和踩坑吧，坑踩的挺大，有vue3一起踩坑的可以相互讨论哈
注意看注释，很多注意点在注释和总结那里
往index.html 添加引入
<script src="https://g.alicdn.com/dingding/dinglogin/0.0.5/ddLogin.js"></script>其他代码
// api。js 可忽略
// 扫码登录
export function scanCode (params) {
return request({
url: '/auth',
method: 'get',
params
})
}login.vue 代码
算个示例吧：核心实现代码
//往登录页面放一个div id为login_container
<div style="" class="qrCode" id="login_container">
</div>
<script setup>
import {reactive, ref, onMounted, watch } from "vue"
import {useRouter, useRoute} from "vue-router"
import {useStore} from 'vuex'
import { scanCode } from '@/api/login'
let goto = encodeURIComponent('https://oapi.dingtalk.com/connect/oauth2/sns_authorize?appid=appid&response_type=code&scope=snsapi_login&state=STATE&redirect_uri=你的项目vue项目地址或者你发版后页面的地址记得在钉钉回调url一致否则无法登录')
let tmpAuthCode = window.location.search.split("&")[0].split("=")[1]
onMounted(() => {
DDLogin({
id: "login_container", //这里需要你在自己的页面定义一个HTML标签并设置id，例如<div id="login_container"></div>或<span id="login_container"></span>
goto: goto, //请参考注释里的方式
style: "border:none;background-color:#FFFFFF;",
width: "270",
height: "370"
})
let handleMessage = function (event) {
let origin = event.origin
console.log("origin", event.origin)
if ( origin == "https://login.dingtalk.com" ) { //判断是否来自ddLogin扫码事件。
let loginTmpCode = event.data
//获取到loginTmpCode后就可以在这里构造跳转链接进行跳转了
//将loginTmpCodeloginTmpCode拼接到url末尾用于跳转，不要open打开新的标签
window.location.href = decodeURIComponent(goto + "&loginTmpCode=" + loginTmpCode)
}
}
if (typeof window.addEventListener != 'undefined') {
if (tmpAuthCode){
//参数要用这种方式，不要直接拼接url，后端拿不到，这个坑也踩过了
store.dispatch('scanCodeLogin', {
code: tmpAuthCode,
state: 'auth'
}).then(res => {
console.log('成功', res)
window.location.href = 'http://192.168.0.235:2021/' ;// 这个地址要跟redirect_uri的地址一样，不然你跳转后请求后获取的用户信息的丢在redirect_uri的地址了，你肯定拿不到了，记住这个地址要得是redirect_uri的地址，redirect_uri的地址一点得是你项目的地址，不然会有热更新刷新问题【每隔一段时间就会自动刷新页面问题】
}, err => {
console.log('失败', err)
})
}
window.addEventListener('message', handleMessage, false)
} else if (typeof window.attachEvent != 'undefined') {
window.attachEvent('onmessage', handleMessage)
}
})
</script>钉钉端配置
redirect_uri的地址配置前端的vue启动的地址，红的的就是
问题总结
redirect_uri地址必须跟更vue启动的地址一致，也就是说必须 localhost+端口 ：http://localhost:2021/、你本地的ip+端口：http://192.168.1.215:2021/；
redirect_uri 的地址必须通过encodeURIComponent进行处理哦
1、踩过使用后端穿透问题，有问题会出现302重定向的问题【就是登录后跳转redirect_uri，再去拿后端的接口不现实，因为redirect跳转是后端的地址前端控制不了】pass了；
2、前端使用钉钉穿透后，把穿透的地址给到后端放到钉钉的回调url里，这样确实是扫码登录后可以打开vue的项目，但是！！！一旦你将vue的穿透地址放到钉钉回调url【：也就是redirect_uri的地址】后有个非常非常严重的问题：【就是自动刷问题，一分钟页面自动刷新：罪魁祸首是 vite 的热更新功能，为什么跟热更新有关呢：因为vite热更新：真的这么智能：改下代码就刷新页面？不是的，是有轮训机制，定时去检测代码，检测的同时发现打开的域名【也就是穿透的地址】跟vue启动的域名不一致，vite始终匹配不上：就会触发window.location.reload()重新刷新，一直不匹配就一直不刷新】；
2的解决方法就是：localhost+端口 ：http://localhost:2021/、你本地的ip+端口：http://192.168.1.215:2021/；localhost就没必要使用。配置ip就可以了
这种情况占用问题，昨天还好好的今天就穿透不了的问题：解决方法是【其实已经不用穿透了，在钉钉开发者平台上配置回调redirect_uri地址就是前端vue项目启东的地址就可以，然后前端就没必要穿透了】
//这种穿透的端口是vue项目启动后的端口
//将abcde的换掉就行：ding -config=ding.cfg -subdomain=start 9527
cd windows_64
ding -config=ding.cfg -subdomain=abcde 8080问题效果：
****这一行错误
Version 1.7/1.7
Forwarding 127.0.0.1:4044
Forwarding 127.0.0.1:4044
Web Interface 127.0.0.1:4040
# Conn 0
Avg Conn Time 0.00ms
还有就是后端接口的：
http://zhangsan.vaiwan.com 这个接口地址是后端用花生壳穿透的，不要用ip
service.interceptors.request.use((config) => {
if (store.getters.token){
config.headers['Authentication'] = getCookie('token')
} else {
console.log(config)
if (config.url.includes('/auth')){
config.baseURL = 'http://zhangsan.vaiwan.com'
}
}
console.log("拦截", config)
return config
}, (error) => {
return Promise.reject(error)
})定位问题步骤总结
首先通过打包，确定开发环境是否有问题，还是只在运行项目的时候才有定时重载页面问题；定位到打包后不会刷新；
这个问题触及：vite 和更新源码了：vite 原理：HMR 和 Live Reload
更加vite 热更新原理，webSocket 来进行连接，重载主要在 handleHMRUpdate 负责代码的更新逻辑，当检测文件无法热更新的时候，只能全部加载也就是刷新了，但是这种的缺陷vite也没有做掐断机制以及报错。
