登录接口添加验证码登录，忘记密码功能
This commit is contained in:
Leo_Ding
parent
c99291c1bd
commit
4ebfaaf727
@ -4,7 +4,7 @@
|
||||
<meta charset="UTF-8" />
|
||||
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Vite + Vue + TS</title>
|
||||
<title>GxDL算力云</title>
|
||||
</head>
|
||||
<body>
|
||||
<div id="app"></div>
|
||||
|
||||
@ -2,11 +2,11 @@
|
||||
<a-form ref="formRef" :model="formState" name="normal_login" class="login-form" @finish="onFinish"
|
||||
@finish-failed="onFinishFailed">
|
||||
<a-form-item label="账号" name="phone" :rules="[{ required: true, message: '请输入用户名！' }]">
|
||||
<a-input v-model:value="formState.phone" />
|
||||
<a-input v-model:value="formState.phone" placeholder="请输入账号"/>
|
||||
</a-form-item>
|
||||
<!-- 手动控制密码字段的错误状态 -->
|
||||
<a-form-item label="密码" name="code" :help="codeHelp" :rules="[{ required: true, message: '请输入密码！' }]">
|
||||
<a-input-password v-model:value="formState.code" />
|
||||
<a-input-password v-model:value="formState.code" placeholder="请输入密码"/>
|
||||
</a-form-item>
|
||||
<a-form-item>
|
||||
<a-button type="primary" html-type="submit" block class="login-form-button">
|
||||
|
||||
88
src/views/login/component/code.vue
Normal file
88
src/views/login/component/code.vue
Normal file
@ -0,0 +1,88 @@
|
||||
<template>
|
||||
<a-form ref="formRef" :model="formState" name="normal_login" class="login-form" @finish="onFinish"
|
||||
@finish-failed="onFinishFailed">
|
||||
<a-form-item label="手机号" name="phone" :rules="[{ required: true, message: '请输入手机号！' }]">
|
||||
<a-input v-model:value="formState.phone" placeholder="请输入手机号">
|
||||
<template #addonAfter>
|
||||
<div>获取验证码</div>
|
||||
</template>
|
||||
</a-input>
|
||||
</a-form-item>
|
||||
<!-- 手动控制密码字段的错误状态 -->
|
||||
<a-form-item label="验证码" name="code" :rules="[{ required: true, message: '请输入验证码！' }]">
|
||||
<a-input v-model:value="formState.code" placeholder="请输入验证码"/>
|
||||
</a-form-item>
|
||||
<a-form-item>
|
||||
<a-button type="primary" html-type="submit" block class="login-form-button">
|
||||
登 录
|
||||
</a-button>
|
||||
</a-form-item>
|
||||
</a-form>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { reactive, ref, shallowRef } from 'vue';
|
||||
import { useRouter } from 'vue-router';
|
||||
import { login, fetchUserInfo } from '@/apis/modules/login';
|
||||
import { message, type FormInstance } from 'ant-design-vue';
|
||||
|
||||
const router = useRouter();
|
||||
const formRef = ref<FormInstance>();
|
||||
|
||||
const codeValidateStatus = shallowRef<'success' | 'warning' | 'error' | ''>('');
|
||||
const codeHelp = shallowRef('');
|
||||
|
||||
interface FormState {
|
||||
phone: string;
|
||||
code: string;
|
||||
remember: boolean;
|
||||
}
|
||||
|
||||
const formState = reactive<FormState>({
|
||||
phone: '',
|
||||
code: '',
|
||||
remember: true,
|
||||
});
|
||||
|
||||
const clearCodeError = () => {
|
||||
codeValidateStatus.value = '';
|
||||
codeHelp.value = '';
|
||||
};
|
||||
|
||||
const setCodeError = (msg: string) => {
|
||||
codeValidateStatus.value = 'error';
|
||||
codeHelp.value = msg;
|
||||
};
|
||||
|
||||
const onFinish = async (values: FormState) => {
|
||||
clearCodeError();
|
||||
|
||||
const loginData = {
|
||||
...values,
|
||||
login_method: 'PWD'//PWD表示密码登录，SMS表示短信验证码登录
|
||||
};
|
||||
formRef.value?.validateFields().then(async () => {
|
||||
try {
|
||||
const res: any = await login(loginData);
|
||||
console.log('登录请求成功:', res);
|
||||
// 登录成功后，将token存入localStorage
|
||||
const token = res?.access_token;
|
||||
if (!token) {
|
||||
throw new Error('登录失败：未返回有效凭证');
|
||||
}
|
||||
localStorage.setItem('token', token);
|
||||
const userRes=await fetchUserInfo();
|
||||
localStorage.setItem('userInfo', JSON.stringify(userRes));
|
||||
router.push('/layout/home');
|
||||
} catch (error: any) {
|
||||
console.error('登录请求失败:', error);
|
||||
message.error(error || '用户名或密码错误');
|
||||
}
|
||||
});
|
||||
|
||||
};
|
||||
|
||||
const onFinishFailed = (errorInfo: any) => {
|
||||
console.log('表单验证失败:', errorInfo);
|
||||
};
|
||||
</script>
|
||||
@ -8,11 +8,17 @@
|
||||
<h4 class="login-content-title">GPU算力管理平台</h4>
|
||||
<div>
|
||||
<a-tabs v-model:activeKey="state.tabsActiveName" size="large">
|
||||
<a-tab-pane key="account" tab="登录">
|
||||
<a-tab-pane key="account" tab="账号密码登录">
|
||||
<Account />
|
||||
</a-tab-pane>
|
||||
<a-tab-pane key="mobile" tab="注册">Tab 2</a-tab-pane>
|
||||
<a-tab-pane key="code" tab="验证码登录">
|
||||
<Code />
|
||||
</a-tab-pane>
|
||||
</a-tabs>
|
||||
<div style="width: 100%;display: flex;justify-content: space-between;font-size: 14px;">
|
||||
<span style="color:#1677ff;cursor: pointer;">注册</span>
|
||||
<span style="color:#666;cursor: pointer;">忘记密码</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -24,6 +30,7 @@
|
||||
<script setup lang="ts">
|
||||
import { reactive, computed } from "vue";
|
||||
import Account from "@/views/login/component/account.vue";
|
||||
import Code from "@/views/login/component/code.vue";
|
||||
// import Mobile from "@/views/login/component/mobile.vue";
|
||||
// import Scan from "@/views/login/component/scan.vue";
|
||||
// import { useThemeConfigStateStore } from "@/stores/themeConfig";
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user