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 AppHeader from '@/app/layouts/AppHeader.vue'
import AppSidebar from '@/app/layouts/AppSidebar.vue' import AppSidebar from '@/app/layouts/AppSidebar.vue'
import { compressImageFile } from '@/shared/utils/imageResize' import { compressImageFile } from '@/shared/utils/imageResize'
import axios from 'axios'
const message = useMessage() const message = useMessage()
const authStore = useAuthStore() const authStore = useAuthStore()
@ -17,30 +16,10 @@ const appName = computed(() => localStorage.getItem('appName') || 'Jingrow')
const currentYear = computed(() => new Date().getFullYear()) const currentYear = computed(() => new Date().getFullYear())
const logoUrl = computed(() => '/logo.svg') const logoUrl = computed(() => '/logo.svg')
// / //
const showLoginModal = ref(false)
const showSignupModal = ref(false) const showSignupModal = ref(false)
const loginFormRef = ref()
const signupFormRef = ref() const signupFormRef = ref()
const loginLoading = ref(false)
const signupLoading = 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({ const signupFormData = reactive({
@ -134,36 +113,21 @@ const signupRules = computed(() => {
return rules return rules
}) })
const handleLogin = () => { const handleLogin = async () => {
showLoginModal.value = true 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 = () => { const handleSignup = () => {
showSignupModal.value = true 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 () => { const handleSignupSubmit = async () => {
try { try {
@ -191,19 +155,18 @@ const handleSignupSubmit = async () => {
signupFormData.email = '' signupFormData.email = ''
signupFormData.phoneNumber = '' signupFormData.phoneNumber = ''
} else { } else {
const loginResult = await authStore.login(signupFormData.username, signupFormData.password) //
if (loginResult.success) { showSignupModal.value = false
showSignupModal.value = false signupFormData.username = ''
signupFormData.username = '' signupFormData.password = ''
signupFormData.password = '' signupFormData.confirmPassword = ''
signupFormData.confirmPassword = '' signupFormData.email = ''
signupFormData.email = '' signupFormData.phoneNumber = ''
signupFormData.phoneNumber = '' message.success(t('Sign up successful, please login'))
} else { //
message.warning(loginResult.error || t('Sign up successful, but auto login failed. Please login manually')) setTimeout(() => {
showSignupModal.value = false handleLogin()
showLoginModal.value = true }, 1000)
}
} }
} else { } else {
const errorMsg = result.error || t('Sign up failed') 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 = () => { const switchToLogin = () => {
showSignupModal.value = false showSignupModal.value = false
showLoginModal.value = true handleLogin()
} }
// //
@ -651,7 +610,7 @@ const handleDownload = async () => {
// //
if (!isLoggedIn.value) { if (!isLoggedIn.value) {
message.warning(t('Please login to download')) message.warning(t('Please login to download'))
showLoginModal.value = true handleLogin()
return return
} }
@ -1464,74 +1423,6 @@ onUnmounted(() => {
</n-layout> </n-layout>
</template> </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 <n-modal