refactor: 移除用户名密码登录表单,直接跳转到 OAuth2 授权页面

- 移除登录弹窗中的用户名密码表单及相关代码
- 修改 handleLogin 函数,直接调用 authStore.login() 跳转到授权页面
- 优化注册成功后的流程,自动跳转到 OAuth2 登录
- 清理未使用的代码和导入(axios, switchToSignup 等)
- 符合 OAuth2 最佳实践,提升安全性和用户体验
This commit is contained in:
jingrow 2026-01-04 18:12:44 +08:00
parent a135223579
commit ce0dc6c232

View File

@ -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