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 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
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user