绑定微信号,实现自动登录
This commit is contained in:
parent
a7611313ff
commit
44020afbe0
18
api/login.js
18
api/login.js
@ -57,3 +57,21 @@ export function getCodeImg() {
|
||||
timeout: 20000
|
||||
})
|
||||
}
|
||||
|
||||
// 微信自动登录
|
||||
export function autoLogin(data) {
|
||||
return request({
|
||||
'url': '/weixin/auth/autoLogin',
|
||||
'data':data,
|
||||
'method': 'post'
|
||||
})
|
||||
}
|
||||
|
||||
// 微信-登录绑定微信号
|
||||
export function autobind(data) {
|
||||
return request({
|
||||
'url': '/weixin/auth/bind',
|
||||
'data':data,
|
||||
'method': 'post'
|
||||
})
|
||||
}
|
||||
183
pages/login.vue
183
pages/login.vue
@ -39,8 +39,8 @@
|
||||
<script setup>
|
||||
import { ref, getCurrentInstance } from "vue"
|
||||
import { onLoad } from "@dcloudio/uni-app"
|
||||
import { getToken } from '@/utils/auth'
|
||||
import { getCodeImg } from '@/api/login'
|
||||
import { getToken, setToken } from '@/utils/auth'
|
||||
import { getCodeImg, autoLogin, autobind } from '@/api/login'
|
||||
import { useConfigStore, useUserStore } from '@/store'
|
||||
|
||||
const { proxy } = getCurrentInstance()
|
||||
@ -52,24 +52,20 @@
|
||||
const register = ref(false)
|
||||
// 密码可见性
|
||||
const passwordVisible = ref(false)
|
||||
// 存储从URL获取的weixinId
|
||||
const weixinId = ref('')
|
||||
// 防止重复自动登录
|
||||
let autoLoginExecuted = false
|
||||
// 标记是否已经清除过URL参数
|
||||
let urlCleared = false
|
||||
|
||||
const loginForm = ref({
|
||||
username: "admin",
|
||||
password: "admin123",
|
||||
password: "jm@9527",
|
||||
code: "",
|
||||
uuid: ""
|
||||
})
|
||||
|
||||
import { onShow } from "@dcloudio/uni-app"
|
||||
|
||||
// 页面每次显示时都会执行
|
||||
onShow(() => {
|
||||
// #ifdef H5
|
||||
const currentUrl = window.location.href
|
||||
alert('当前URL:' + currentUrl)
|
||||
// #endif
|
||||
})
|
||||
|
||||
// 切换密码可见性
|
||||
function togglePasswordVisible() {
|
||||
passwordVisible.value = !passwordVisible.value
|
||||
@ -105,35 +101,179 @@ onShow(() => {
|
||||
}
|
||||
}
|
||||
|
||||
// 密码登录
|
||||
// 密码登录(有微信ID时调用autobind,无微信ID时调用普通登录)
|
||||
async function pwdLogin() {
|
||||
// 如果有微信ID,调用绑定接口
|
||||
if (weixinId.value) {
|
||||
const params = {
|
||||
username: loginForm.value.username,
|
||||
password: loginForm.value.password,
|
||||
code: loginForm.value.code,
|
||||
uuid: loginForm.value.uuid,
|
||||
weixinId: weixinId.value
|
||||
}
|
||||
|
||||
autobind(params).then(res => {
|
||||
proxy.$modal.closeLoading()
|
||||
if (res && res.code === 200) {
|
||||
// 保存token
|
||||
if (res.data && res.data.token) {
|
||||
setToken(res.data.token)
|
||||
}
|
||||
proxy.$modal.msgSuccess("绑定成功,登录中...")
|
||||
// 绑定成功后,清除URL参数并跳转
|
||||
removeWeixinIdFromUrl()
|
||||
setTimeout(() => {
|
||||
loginSuccess()
|
||||
}, 1500)
|
||||
} else {
|
||||
proxy.$modal.msgError(res.msg || "绑定失败,请重试")
|
||||
if (captchaEnabled.value) {
|
||||
getCode()
|
||||
}
|
||||
}
|
||||
}).catch(() => {
|
||||
proxy.$modal.closeLoading()
|
||||
if (captchaEnabled.value) {
|
||||
getCode()
|
||||
}
|
||||
})
|
||||
} else {
|
||||
// 普通密码登录
|
||||
useUserStore().login(loginForm.value).then(() => {
|
||||
proxy.$modal.closeLoading()
|
||||
loginSuccess()
|
||||
}).catch(() => {
|
||||
proxy.$modal.closeLoading()
|
||||
if (captchaEnabled.value) {
|
||||
getCode()
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
// 登录成功后,处理函数
|
||||
function loginSuccess(result) {
|
||||
// 设置用户信息
|
||||
useUserStore().getInfo().then(res => {
|
||||
function loginSuccess() {
|
||||
// 设置用户信息并跳转
|
||||
useUserStore().getInfo().then(() => {
|
||||
proxy.$tab.reLaunch('/pages/work/index')
|
||||
}).catch(() => {
|
||||
// 即使获取用户信息失败,也尝试跳转
|
||||
proxy.$tab.reLaunch('/pages/work/index')
|
||||
})
|
||||
}
|
||||
|
||||
// 从URL中获取weixinId参数(提取?weixinId=后面所有的内容,包括#)
|
||||
function getWeixinIdFromUrl() {
|
||||
// #ifdef H5
|
||||
const currentUrl = window.location.href
|
||||
// 使用正则表达式匹配 weixinId 参数,提取后面所有内容(包括#和后面的所有字符)
|
||||
const match = currentUrl.match(/[?&]weixinId=(.*)/)
|
||||
if (match && match[1]) {
|
||||
return decodeURIComponent(match[1])
|
||||
}
|
||||
return null
|
||||
// #endif
|
||||
// #ifndef H5
|
||||
return null
|
||||
// #endif
|
||||
}
|
||||
|
||||
// 清除URL中的weixinId参数
|
||||
function removeWeixinIdFromUrl() {
|
||||
if (urlCleared) return
|
||||
// #ifdef H5
|
||||
try {
|
||||
const currentUrl = window.location.href
|
||||
if (currentUrl.includes('weixinId=')) {
|
||||
const url = new URL(currentUrl)
|
||||
url.searchParams.delete('weixinId')
|
||||
window.history.replaceState({}, '', url.toString())
|
||||
urlCleared = true
|
||||
}
|
||||
} catch (e) {
|
||||
console.error('清除URL参数失败:', e)
|
||||
}
|
||||
// #endif
|
||||
}
|
||||
|
||||
onLoad(() => {
|
||||
//#ifdef H5
|
||||
if (getToken()) {
|
||||
proxy.$tab.reLaunch('/pages/index')
|
||||
// 检查是否已登录
|
||||
const token = getToken()
|
||||
if (token) {
|
||||
proxy.$tab.reLaunch('/pages/work/index')
|
||||
return
|
||||
}
|
||||
|
||||
// 防止重复执行自动登录
|
||||
if (autoLoginExecuted) {
|
||||
return
|
||||
}
|
||||
|
||||
// 获取URL中的weixinId
|
||||
const id = getWeixinIdFromUrl()
|
||||
|
||||
if (id) {
|
||||
// 保存weixinId
|
||||
weixinId.value = id
|
||||
autoLoginExecuted = true
|
||||
|
||||
// 先清除URL参数,防止跳转后再次触发
|
||||
removeWeixinIdFromUrl()
|
||||
|
||||
// 调用自动登录接口
|
||||
proxy.$modal.loading("微信自动登录中...")
|
||||
const bodydata = {
|
||||
weixinId: id
|
||||
}
|
||||
|
||||
autoLogin(bodydata).then(res => {
|
||||
proxy.$modal.closeLoading()
|
||||
|
||||
// 根据返回结果处理
|
||||
if (res && res.code === 200) {
|
||||
// 保存token
|
||||
if (res.data && res.data.token) {
|
||||
setToken(res.data.token)
|
||||
}
|
||||
proxy.$modal.msgSuccess("登录成功")
|
||||
// 获取用户信息并跳转
|
||||
useUserStore().getInfo().then(() => {
|
||||
proxy.$tab.reLaunch('/pages/work/index')
|
||||
}).catch(() => {
|
||||
// 即使获取用户信息失败,只要有token就尝试跳转
|
||||
if (getToken()) {
|
||||
proxy.$tab.reLaunch('/pages/work/index')
|
||||
} else {
|
||||
proxy.$modal.msgError("登录异常,请使用账号密码登录")
|
||||
getCode()
|
||||
}
|
||||
})
|
||||
} else {
|
||||
proxy.$modal.msgWarning(res?.msg || "请绑定账号后登录")
|
||||
// 未绑定,显示普通登录界面
|
||||
getCode()
|
||||
}
|
||||
}).catch(error => {
|
||||
proxy.$modal.closeLoading()
|
||||
console.error('自动登录错误:', error)
|
||||
proxy.$modal.msgError(error.message || "自动登录失败,请使用账号密码登录")
|
||||
// 自动登录失败,显示普通登录界面
|
||||
getCode()
|
||||
})
|
||||
} else {
|
||||
// 没有微信ID,显示普通登录界面
|
||||
getCode()
|
||||
}
|
||||
//#endif
|
||||
|
||||
//#ifndef H5
|
||||
// 非H5环境,直接获取验证码
|
||||
getCode()
|
||||
//#endif
|
||||
})
|
||||
|
||||
getCode()
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@ -184,7 +324,7 @@ onShow(() => {
|
||||
line-height: 20px;
|
||||
text-align: left;
|
||||
padding-left: 15px;
|
||||
padding-right: 45px; /* 为眼睛图标留出更多空间 */
|
||||
padding-right: 45px;
|
||||
}
|
||||
|
||||
.password-eye {
|
||||
@ -199,7 +339,6 @@ onShow(() => {
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
|
||||
/* 增加点击区域 */
|
||||
&::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
|
||||
@ -117,6 +117,7 @@ export const useUserStore = defineStore('user', () => {
|
||||
roles,
|
||||
permissions,
|
||||
userInfo,
|
||||
SET_TOKEN,
|
||||
SET_AVATAR,
|
||||
login: loginAction,
|
||||
getInfo: getInfoAction,
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user