<template>
<div class="login-box">
<a-form-model :model="user" :rules="rules" ref="loginForm">
<a-form-model-item prop="username">
<a-input
placeholder="请输入账户"
v-model="user.username"
>
<a-icon slot="prefix" type="user" />
</a-input>
</a-form-model-item>
<a-form-model-item prop="password">
<a-input-password
placeholder="请输入账户密码"
v-model="user.password"
>
<a-icon slot="prefix" type="lock" />
</a-input-password>
</a-form-model-item>
<a-form-model-item prop="code">
<div class="code-box">
<a-input
placeholder="请输入验证码"
v-model="user.code"
>
<a-icon slot="prefix" type="safety" />
</a-input>
<img :src="codeImg" alt="" @click="refGetImg" />
</div>
</a-form-model-item>
<a-button type="primary" @click="loginClick"> 登录 </a-button>
</a-form-model>
</div>
</template>
<script lang="ts">
import { Vue , Component} from 'vue-property-decorator';
export interface InterfaceLogin{
code:string ;
username:string;
password:string;
uuid:string | null;
}
@Component({
name:'login',
})
export default class login extends Vue {
private user:InterfaceLogin = {
username:'' ,
password:'' ,
code:'',
uuid:'',
};
private codeImg = '' ;
private rules = {
username:[
{ required:true , message:'请输入账户',trigger:['change','blur'] },
],
password: [
{ required: true, message: '请输入密码', trigger: ['change', 'blur'] },
],
code: [
{ required: true, message: '请输入验证码', trigger: ['change', 'blur'] },
],
};
created() {
/** 清空 Session Storage 的值 */
sessionStorage.clear();
/** 获取验证码 */
this.refGetImg();
};
/** 获取验证码 */
private async refGetImg(){
const res = await getCode() //后台返回数据
if(res.status === 200){
this.codeImg = res.data.img
this.user.uuid = res.data.uuid
}
};
/** 登录 */
private async loginClick(){
(this.$refs.loginForm as any).validate(async (valid: any) => {
if (valid) {
const res = await postLogin(this.user); //调接口
if (res.code === 200) {
// 如果登录成功那么清楚本地数据使页面干净
sessionStorage.clear();
sessionStorage.setItem('Token', res.data.token); // 本地存取Token
sessionStorage.setItem('somUser', JSON.stringify(res.data.user)); // 本地存取个人信息
this.$router.push({ //跳转到主页面
path: '/home',
});
// 清空数据
this.user = {
code: '',
password: '',
username: '',
uuid: '',
};
} else {
this.$message.warning(res.message);
this.user.code = '';
// 如果失败更新验证码
this.refGetImg();
}
} else {
console.log('error submit!!');
return false;
}
});
};
}
</script>
VUE+TS+AntdVue验证码登录框实现
最新推荐文章于 2023-04-08 11:00:53 发布