hookehuyr

fix(auth): 修复登录、注册和忘记密码页面的功能实现

- 移除登录页面的默认手机号和密码
- 更新用户信息接口和重置密码接口的请求方法为POST
- 实现发送验证码、注册和重置密码的API调用
- 优化路由守卫逻辑,简化登录检查流程
......@@ -2,7 +2,7 @@
VITE_BASE = /
# 测试open-id
VITE_OPENID = api-test-openid
# VITE_OPENID = api-test-openid
# VITE_OPENID = o8BRf1gLDWieH3Y3JvbrI_4IjaME
# VITE_OPENID = oJLZq5t9PIKLW9tm1oSUNAuPwssA
# VITE_OPENID = oJLZq5uT_6GwIh2tQWh1F9IoHZ3U
......
<!--
* @Date: 2025-03-20 19:53:12
* @LastEditors: hookehuyr hookehuyr@gmail.com
* @LastEditTime: 2025-03-25 14:31:15
* @LastEditTime: 2025-03-26 11:30:48
* @FilePath: /mlaj/src/App.vue
* @Description: 入口文件
-->
......
/*
* @Date: 2025-03-23 23:45:53
* @LastEditors: hookehuyr hookehuyr@gmail.com
* @LastEditTime: 2025-03-26 00:41:11
* @LastEditTime: 2025-03-26 12:24:03
* @FilePath: /mlaj/src/api/users.js
* @Description: 用户相关接口
*/
......@@ -43,7 +43,7 @@ export const getUserInfoAPI = () => fn(fetch.get(Api.USER_INFO));
* @param: name 用户名称
* @param: avatar 头像
*/
export const updateUserInfoAPI = (params) => fn(fetch.put(Api.USER_UPDATE, params));
export const updateUserInfoAPI = (params) => fn(fetch.post(Api.USER_UPDATE, params));
/**
* @description: 忘记密码
......@@ -51,4 +51,4 @@ export const updateUserInfoAPI = (params) => fn(fetch.put(Api.USER_UPDATE, param
* @param: sms_code 短信验证码
* @param: password 密码
*/
export const resetPasswordAPI = (params) => fn(fetch.put(Api.USER_PASSWORD, params));
export const resetPasswordAPI = (params) => fn(fetch.post(Api.USER_PASSWORD, params));
......
/*
* @Date: 2025-03-20 20:36:36
* @LastEditors: hookehuyr hookehuyr@gmail.com
* @LastEditTime: 2025-03-26 10:07:48
* @LastEditTime: 2025-03-26 11:21:05
* @FilePath: /mlaj/src/router/guards.js
* @Description: 路由守卫逻辑
*/
import { getAuthInfoAPI } from '@/api/auth'
import { getUserInfoAPI } from '@/api/users'
import { wxInfo } from '@/utils/tools'
import { wxInfo } from "@/utils/tools"
import { useRoute } from 'vue-router'
const $route = useRoute();
// 需要登录才能访问的路由
export const authRequiredRoutes = [
{
......@@ -29,23 +30,14 @@ export const authRequiredRoutes = [
export const checkWxAuth = async () => {
if (!import.meta.env.DEV && wxInfo().isWeiXin) {
try {
const { code, data } = await getAuthInfoAPI()
const { code, data } = await getAuthInfoAPI();
if (code && !data.openid_has) {
// 直接在这里处理授权跳转
const params = new URLSearchParams({
f: 'behalo',
a: 'openid',
res: encodeURIComponent(
location.origin + location.pathname + location.hash,
),
})
let raw_url = encodeURIComponent(location.origin + location.pathname + $route.query.href); // 未授权的地址
const short_url = `/srv/?f=behalo&a=openid&res=${raw_url}`;
location.href = short_url;
if (import.meta.env.DEV) {
params.append('test_openid', import.meta.env.VITE_OPENID)
}
location.href = `/srv/?${params.toString()}`
return false
return false;
}
} catch (error) {
console.error('微信授权检查失败:', error)
......@@ -55,7 +47,9 @@ export const checkWxAuth = async () => {
}
// 登录权限检查
export const checkAuth = async (to) => {
export const checkAuth = (to) => {
const currentUser = JSON.parse(localStorage.getItem('currentUser'))
// 检查当前路由是否需要认证
const needAuth = authRequiredRoutes.some((route) => {
// 如果是正则匹配模式
......@@ -70,21 +64,8 @@ export const checkAuth = async (to) => {
return to.path.startsWith(route.path)
})
// 如果路由需要认证,则尝试获取用户信息
if (needAuth) {
try {
// 请求用户信息接口
const { code, data } = await getUserInfoAPI()
if (code) {
// 如果成功获取用户信息,更新currentUser并允许访问
localStorage.setItem('currentUser', JSON.stringify(data))
return true
}
} catch (error) {
console.error('获取用户信息失败:', error)
}
// 如果接口请求失败或返回401,直接重定向到登录页面
if (needAuth && !currentUser) {
// 未登录时重定向到登录页面
return { path: '/login', query: { redirect: to.fullPath } }
}
......
......@@ -110,6 +110,9 @@
import { ref, reactive } from 'vue'
import { useRouter } from 'vue-router'
import FrostedGlass from '@/components/ui/FrostedGlass.vue'
import { smsAPI } from '@/api/common';
import { resetPasswordAPI } from '@/api/users';
import { showToast } from 'vant';
const router = useRouter()
const error = ref('')
......@@ -157,8 +160,13 @@ const sendVerificationCode = async () => {
}
try {
// TODO: 调用发送验证码API
startCountdown()
// TAG: 调用发送验证码API
const { code } = await smsAPI({ mobile: formData.phone })
if (code) {
showToast('验证码已发送')
startCountdown()
return
}
} catch (err) {
console.error('Send verification code error:', err)
error.value = '发送验证码失败,请稍后重试'
......@@ -175,10 +183,19 @@ const handleSubmit = async () => {
error.value = ''
loading.value = true
// TODO: 调用重置密码API
// TAG: 调用重置密码API
const { code } = await resetPasswordAPI({
mobile: formData.phone,
sms_code: formData.verificationCode,
password: formData.password
})
if (code) {
showToast('密码重置成功')
// 重置成功后跳转到登录页
router.push('/login')
}
// 重置成功后跳转到登录页
router.push('/login')
} catch (err) {
console.error('Reset password error:', err)
error.value = '重置密码失败,请稍后重试'
......
......@@ -123,8 +123,8 @@ useTitle($route.meta.title);
const router = useRouter()
const { login } = useAuth()
const mobile = ref('13761653761')
const password = ref('password123')
const mobile = ref('')
const password = ref('')
const error = ref('')
const loading = ref(false)
......
......@@ -185,6 +185,9 @@ import FrostedGlass from '@/components/ui/FrostedGlass.vue'
import TermsPopup from '@/components/ui/TermsPopup.vue'
import { useAuth } from '@/contexts/auth'
import { useTitle } from '@vueuse/core';
import { smsAPI } from '@/api/common';
import { registerAPI } from '@/api/users';
import { showToast } from 'vant';
const $route = useRoute();
useTitle($route.meta.title);
......@@ -240,8 +243,13 @@ const sendVerificationCode = async () => {
}
try {
// TODO: 调用发送验证码API
startCountdown()
// TAG: 调用发送验证码API
const { code } = await smsAPI({ mobile: formData.phone })
if (code) {
showToast('验证码已发送')
startCountdown()
return
}
} catch (err) {
console.error('Send verification code error:', err)
error.value = '发送验证码失败,请稍后重试'
......@@ -273,14 +281,23 @@ const handleSubmit = async () => {
error.value = ''
loading.value = true
// 使用auth.js中的login函数
const success = login({
// 调用注册接口
const { code } = await registerAPI({
name: formData.name,
avatar: 'https://cdn.ipadbiz.cn/mlaj/images/user-avatar-3.jpg'
mobile: formData.phone,
sms_code: formData.verificationCode,
password: formData.password,
})
if (success) {
router.push('/')
if (code) {
// 使用auth.js中的login函数
const success = login({
name: formData.name,
mobile: formData.phone,
avatar: ''
})
if (success) {
router.push('/')
}
} else {
error.value = '注册失败,请稍后再试'
}
......