refactor: 使用vue3组合式API重构登录页代码 (#172)
This commit is contained in:
parent
b18d872c66
commit
dc7542de60
@ -14,7 +14,7 @@
|
|||||||
<el-form
|
<el-form
|
||||||
:model="formData"
|
:model="formData"
|
||||||
:rules="rules"
|
:rules="rules"
|
||||||
ref="formData"
|
ref="formDataRef"
|
||||||
label-width="100px"
|
label-width="100px"
|
||||||
class="login-form"
|
class="login-form"
|
||||||
@submit.prevent
|
@submit.prevent
|
||||||
@ -36,17 +36,17 @@
|
|||||||
|
|
||||||
<el-form-item class="button-group">
|
<el-form-item class="button-group">
|
||||||
<el-button
|
<el-button
|
||||||
:loading="loginPending"
|
:loading="pending.login"
|
||||||
size="small"
|
size="small"
|
||||||
type="primary"
|
type="primary"
|
||||||
class="button"
|
class="button"
|
||||||
@click="submitForm('formData', 'login')"
|
@click="submitForm('login')"
|
||||||
>登录</el-button
|
>登录</el-button
|
||||||
>
|
>
|
||||||
<el-button
|
<el-button
|
||||||
:loading="registerPending"
|
:loading="pending.register"
|
||||||
class="button register-button"
|
class="button register-button"
|
||||||
@click="submitForm('formData', 'register')"
|
@click="submitForm('register')"
|
||||||
>注册</el-button
|
>注册</el-button
|
||||||
>
|
>
|
||||||
</el-form-item>
|
</el-form-item>
|
||||||
@ -55,113 +55,134 @@
|
|||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script setup lang="ts">
|
||||||
|
import { onMounted, ref, reactive } from 'vue'
|
||||||
|
import { useStore } from 'vuex'
|
||||||
|
import { useRoute, useRouter } from 'vue-router'
|
||||||
|
|
||||||
import { ElMessage } from 'element-plus'
|
import { ElMessage } from 'element-plus'
|
||||||
import 'element-plus/theme-chalk/src/message.scss'
|
import 'element-plus/theme-chalk/src/message.scss'
|
||||||
|
|
||||||
import { login, register } from '@/management/api/auth'
|
import { login, register } from '@/management/api/auth'
|
||||||
import { refreshCaptcha } from '@/management/api/captcha'
|
import { refreshCaptcha as refreshCaptchaApi } from '@/management/api/captcha'
|
||||||
import { CODE_MAP } from '@/management/api/base'
|
import { CODE_MAP } from '@/management/api/base'
|
||||||
export default {
|
|
||||||
name: 'LoginPage',
|
const store = useStore()
|
||||||
data() {
|
const route = useRoute()
|
||||||
return {
|
const router = useRouter()
|
||||||
formData: {
|
|
||||||
name: '',
|
interface FormData {
|
||||||
password: '',
|
name: string
|
||||||
captcha: '',
|
password: string
|
||||||
captchaId: ''
|
captcha: string
|
||||||
},
|
captchaId: string
|
||||||
rules: {
|
}
|
||||||
name: [
|
|
||||||
{ required: true, message: '请输入账号', trigger: 'blur' },
|
interface Pending {
|
||||||
{
|
login: boolean
|
||||||
min: 3,
|
register: boolean
|
||||||
max: 10,
|
}
|
||||||
message: '长度在 3 到 10 个字符',
|
|
||||||
trigger: 'blur'
|
const formData = reactive<FormData>({
|
||||||
}
|
name: '',
|
||||||
],
|
password: '',
|
||||||
password: [
|
captcha: '',
|
||||||
{ required: true, message: '请输入密码', trigger: 'blur' },
|
captchaId: ''
|
||||||
{
|
})
|
||||||
min: 8,
|
|
||||||
max: 16,
|
const rules = {
|
||||||
message: '长度在 8 到 16 个字符',
|
name: [
|
||||||
trigger: 'blur'
|
{ required: true, message: '请输入账号', trigger: 'blur' },
|
||||||
}
|
{
|
||||||
],
|
min: 3,
|
||||||
captcha: [
|
max: 10,
|
||||||
{
|
message: '长度在 3 到 10 个字符',
|
||||||
required: true,
|
trigger: 'blur'
|
||||||
message: '请输入验证码',
|
|
||||||
trigger: 'blur'
|
|
||||||
}
|
|
||||||
]
|
|
||||||
},
|
|
||||||
loginPending: false,
|
|
||||||
registerPending: false,
|
|
||||||
captchaImgData: ''
|
|
||||||
}
|
}
|
||||||
},
|
],
|
||||||
created() {
|
password: [
|
||||||
this.refreshCaptcha()
|
{ required: true, message: '请输入密码', trigger: 'blur' },
|
||||||
},
|
{
|
||||||
methods: {
|
min: 8,
|
||||||
submitForm(formName, type) {
|
max: 16,
|
||||||
this.$refs[formName].validate(async (valid) => {
|
message: '长度在 8 到 16 个字符',
|
||||||
if (valid) {
|
trigger: 'blur'
|
||||||
try {
|
}
|
||||||
const submitTypes = {
|
],
|
||||||
login,
|
captcha: [
|
||||||
register
|
{
|
||||||
}
|
required: true,
|
||||||
this[`${type}Pending`] = true
|
message: '请输入验证码',
|
||||||
const res = await submitTypes[type]({
|
trigger: 'blur'
|
||||||
username: this.formData.name,
|
}
|
||||||
password: this.formData.password,
|
]
|
||||||
captcha: this.formData.captcha,
|
}
|
||||||
captchaId: this.formData.captchaId
|
|
||||||
})
|
onMounted(() => {
|
||||||
this[`${type}Pending`] = false
|
refreshCaptcha()
|
||||||
if (res.code !== CODE_MAP.SUCCESS) {
|
})
|
||||||
ElMessage.error(res.errmsg)
|
|
||||||
throw new Error('登录/注册失败' + res.errmsg)
|
const pending = reactive<Pending>({
|
||||||
}
|
login: false,
|
||||||
this.$store.dispatch('user/login', {
|
register: false
|
||||||
username: res.data.username,
|
})
|
||||||
token: res.data.token
|
|
||||||
})
|
const captchaImgData = ref<string>('')
|
||||||
let redirect = {
|
const formDataRef = ref<any>(null)
|
||||||
name: 'survey'
|
|
||||||
}
|
const submitForm = (type: 'login' | 'register') => {
|
||||||
if (this.$route.query.redirect) {
|
formDataRef.value.validate(async (valid: boolean) => {
|
||||||
redirect = decodeURIComponent(this.$route.query.redirect)
|
if (valid) {
|
||||||
}
|
|
||||||
this.$router.replace(redirect)
|
|
||||||
} catch (error) {
|
|
||||||
this[`${type}Pending`] = false
|
|
||||||
}
|
|
||||||
return true
|
|
||||||
} else {
|
|
||||||
return false
|
|
||||||
}
|
|
||||||
})
|
|
||||||
},
|
|
||||||
async refreshCaptcha() {
|
|
||||||
try {
|
try {
|
||||||
const res = await refreshCaptcha({
|
const submitTypes = {
|
||||||
captchaId: this.formData.captchaId
|
login,
|
||||||
})
|
register
|
||||||
if (res.code === 200) {
|
|
||||||
const { id, img } = res.data
|
|
||||||
this.formData.captchaId = id
|
|
||||||
this.captchaImgData = img
|
|
||||||
}
|
}
|
||||||
|
pending[type] = true
|
||||||
|
const res: any = await submitTypes[type]({
|
||||||
|
username: formData.name,
|
||||||
|
password: formData.password,
|
||||||
|
captcha: formData.captcha,
|
||||||
|
captchaId: formData.captchaId
|
||||||
|
})
|
||||||
|
pending[type] = false
|
||||||
|
if (res.code !== CODE_MAP.SUCCESS) {
|
||||||
|
ElMessage.error(res.errmsg)
|
||||||
|
throw new Error('登录/注册失败' + res.errmsg)
|
||||||
|
}
|
||||||
|
store.dispatch('user/login', {
|
||||||
|
username: res.data.username,
|
||||||
|
token: res.data.token
|
||||||
|
})
|
||||||
|
let redirect: any = {
|
||||||
|
name: 'survey'
|
||||||
|
}
|
||||||
|
if (route.query.redirect) {
|
||||||
|
redirect = decodeURIComponent(route.query.redirect as string)
|
||||||
|
}
|
||||||
|
router.replace(redirect)
|
||||||
} catch (error) {
|
} catch (error) {
|
||||||
ElMessage.error('获取验证码失败')
|
pending[type] = false
|
||||||
}
|
}
|
||||||
|
return true
|
||||||
|
} else {
|
||||||
|
return false
|
||||||
}
|
}
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
const refreshCaptcha = async () => {
|
||||||
|
try {
|
||||||
|
const res: any = await refreshCaptchaApi({
|
||||||
|
captchaId: formData.captchaId
|
||||||
|
})
|
||||||
|
if (res.code === 200) {
|
||||||
|
const { id, img } = res.data
|
||||||
|
formData.captchaId = id
|
||||||
|
captchaImgData.value = img
|
||||||
|
}
|
||||||
|
} catch (error) {
|
||||||
|
ElMessage.error('获取验证码失败')
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
Loading…
Reference in New Issue
Block a user