refactor: 移除用户名密码登录表单,直接跳转到 OAuth2 授权页面
- 移除登录弹窗中的用户名密码表单及相关代码 - 修改 handleLogin 函数,直接调用 authStore.login() 跳转到授权页面 - 优化注册成功后的流程,自动跳转到 OAuth2 登录 - 清理未使用的代码和导入(axios, switchToSignup 等) - 符合 OAuth2 最佳实践,提升安全性和用户体验
This commit is contained in:
parent
a135223579
commit
ce0dc6c232
@ -9,7 +9,6 @@ import { signupApi } from '@/shared/api/auth'
|
||||
import AppHeader from '@/app/layouts/AppHeader.vue'
|
||||
import AppSidebar from '@/app/layouts/AppSidebar.vue'
|
||||
import { compressImageFile } from '@/shared/utils/imageResize'
|
||||
import axios from 'axios'
|
||||
|
||||
const message = useMessage()
|
||||
const authStore = useAuthStore()
|
||||
@ -17,30 +16,10 @@ const appName = computed(() => localStorage.getItem('appName') || 'Jingrow')
|
||||
const currentYear = computed(() => new Date().getFullYear())
|
||||
const logoUrl = computed(() => '/logo.svg')
|
||||
|
||||
// 登录/注册弹窗状态
|
||||
const showLoginModal = ref(false)
|
||||
// 注册弹窗状态
|
||||
const showSignupModal = ref(false)
|
||||
const loginFormRef = ref()
|
||||
const signupFormRef = ref()
|
||||
const loginLoading = ref(false)
|
||||
const signupLoading = ref(false)
|
||||
const showSignupLink = ref(true)
|
||||
|
||||
// 登录表单
|
||||
const loginFormData = reactive({
|
||||
username: '',
|
||||
password: ''
|
||||
})
|
||||
|
||||
const loginRules = {
|
||||
username: [
|
||||
{ required: true, message: t('Please enter username'), trigger: 'blur' }
|
||||
],
|
||||
password: [
|
||||
{ required: true, message: t('Please enter password'), trigger: 'blur' },
|
||||
{ min: 6, message: t('Password must be at least 6 characters'), trigger: 'blur' }
|
||||
]
|
||||
}
|
||||
|
||||
// 注册表单
|
||||
const signupFormData = reactive({
|
||||
@ -134,36 +113,21 @@ const signupRules = computed(() => {
|
||||
return rules
|
||||
})
|
||||
|
||||
const handleLogin = () => {
|
||||
showLoginModal.value = true
|
||||
const handleLogin = async () => {
|
||||
try {
|
||||
// 直接跳转到 OAuth2 授权页面
|
||||
await authStore.login()
|
||||
// login 方法会重定向到授权页面,这里不会继续执行
|
||||
} catch (error: any) {
|
||||
console.error('Login error:', error)
|
||||
message.error(error.message || t('Login failed, please try again'))
|
||||
}
|
||||
}
|
||||
|
||||
const handleSignup = () => {
|
||||
showSignupModal.value = true
|
||||
}
|
||||
|
||||
const handleLoginSubmit = async () => {
|
||||
try {
|
||||
await loginFormRef.value?.validate()
|
||||
loginLoading.value = true
|
||||
|
||||
const result = await authStore.login(loginFormData.username, loginFormData.password)
|
||||
|
||||
if (result.success) {
|
||||
message.success(t('Login successful'))
|
||||
showLoginModal.value = false
|
||||
loginFormData.username = ''
|
||||
loginFormData.password = ''
|
||||
} else {
|
||||
message.error(result.error || t('Login failed'))
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Login error:', error)
|
||||
message.error(t('Login failed, please check username and password'))
|
||||
} finally {
|
||||
loginLoading.value = false
|
||||
}
|
||||
}
|
||||
|
||||
const handleSignupSubmit = async () => {
|
||||
try {
|
||||
@ -191,19 +155,18 @@ const handleSignupSubmit = async () => {
|
||||
signupFormData.email = ''
|
||||
signupFormData.phoneNumber = ''
|
||||
} else {
|
||||
const loginResult = await authStore.login(signupFormData.username, signupFormData.password)
|
||||
if (loginResult.success) {
|
||||
showSignupModal.value = false
|
||||
signupFormData.username = ''
|
||||
signupFormData.password = ''
|
||||
signupFormData.confirmPassword = ''
|
||||
signupFormData.email = ''
|
||||
signupFormData.phoneNumber = ''
|
||||
} else {
|
||||
message.warning(loginResult.error || t('Sign up successful, but auto login failed. Please login manually'))
|
||||
showSignupModal.value = false
|
||||
showLoginModal.value = true
|
||||
}
|
||||
// 注册成功后,提示用户登录
|
||||
showSignupModal.value = false
|
||||
signupFormData.username = ''
|
||||
signupFormData.password = ''
|
||||
signupFormData.confirmPassword = ''
|
||||
signupFormData.email = ''
|
||||
signupFormData.phoneNumber = ''
|
||||
message.success(t('Sign up successful, please login'))
|
||||
// 延迟跳转到登录页面
|
||||
setTimeout(() => {
|
||||
handleLogin()
|
||||
}, 1000)
|
||||
}
|
||||
} else {
|
||||
const errorMsg = result.error || t('Sign up failed')
|
||||
@ -218,14 +181,10 @@ const handleSignupSubmit = async () => {
|
||||
}
|
||||
}
|
||||
|
||||
const switchToSignup = () => {
|
||||
showLoginModal.value = false
|
||||
showSignupModal.value = true
|
||||
}
|
||||
|
||||
const switchToLogin = () => {
|
||||
showSignupModal.value = false
|
||||
showLoginModal.value = true
|
||||
handleLogin()
|
||||
}
|
||||
|
||||
// 登录状态
|
||||
@ -651,7 +610,7 @@ const handleDownload = async () => {
|
||||
// 检查登录状态
|
||||
if (!isLoggedIn.value) {
|
||||
message.warning(t('Please login to download'))
|
||||
showLoginModal.value = true
|
||||
handleLogin()
|
||||
return
|
||||
}
|
||||
|
||||
@ -1464,74 +1423,6 @@ onUnmounted(() => {
|
||||
</n-layout>
|
||||
</template>
|
||||
|
||||
<!-- 登录弹窗 -->
|
||||
<n-modal
|
||||
v-model:show="showLoginModal"
|
||||
preset="card"
|
||||
:title="appName"
|
||||
size="large"
|
||||
:bordered="false"
|
||||
:mask-closable="true"
|
||||
style="max-width: 500px;"
|
||||
class="auth-modal"
|
||||
>
|
||||
<n-form
|
||||
ref="loginFormRef"
|
||||
:model="loginFormData"
|
||||
:rules="loginRules"
|
||||
size="medium"
|
||||
:show-label="false"
|
||||
@keyup.enter="handleLoginSubmit"
|
||||
>
|
||||
<n-form-item path="username">
|
||||
<n-input
|
||||
v-model:value="loginFormData.username"
|
||||
:placeholder="t('Username')"
|
||||
:input-props="{ autocomplete: 'username' }"
|
||||
>
|
||||
<template #prefix>
|
||||
<Icon icon="tabler:user" />
|
||||
</template>
|
||||
</n-input>
|
||||
</n-form-item>
|
||||
|
||||
<n-form-item path="password">
|
||||
<n-input
|
||||
v-model:value="loginFormData.password"
|
||||
type="password"
|
||||
:placeholder="t('Password')"
|
||||
:input-props="{ autocomplete: 'current-password' }"
|
||||
show-password-on="click"
|
||||
>
|
||||
<template #prefix>
|
||||
<Icon icon="tabler:lock" />
|
||||
</template>
|
||||
</n-input>
|
||||
</n-form-item>
|
||||
|
||||
<n-form-item>
|
||||
<n-button
|
||||
type="primary"
|
||||
size="large"
|
||||
block
|
||||
:loading="loginLoading"
|
||||
@click="handleLoginSubmit"
|
||||
class="brand-button"
|
||||
>
|
||||
{{ t('Login') }}
|
||||
</n-button>
|
||||
</n-form-item>
|
||||
</n-form>
|
||||
|
||||
<div class="auth-footer" v-if="showSignupLink">
|
||||
<n-text depth="3">
|
||||
{{ t("Don't have an account?") }}
|
||||
<a href="javascript:void(0)" class="auth-link" @click="switchToSignup">
|
||||
{{ t('Sign up') }}
|
||||
</a>
|
||||
</n-text>
|
||||
</div>
|
||||
</n-modal>
|
||||
|
||||
<!-- 注册弹窗 -->
|
||||
<n-modal
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user