多种登录-注册-验证码-校验请求
失去焦点校验账号是否存在数据库
<el-input placeholder="手机号"
prefix-icon="el-icon-phone-outline"
v-model="mobile"
clearable
#失去焦点触发check_mobile函数
@blur="check_mobile">
</el-input>
check_mobile() {
//前台校验
//如果input没有填写就结束执行
if (!this.mobile) return;
//正则匹配是否为手机号
if (!this.mobile.match(/^1[3-9][0-9]{9}$/)) {
this.$message({
message: '手机号有误',
type: 'warning',
duration: 1000,
//弹窗结束清空mobile的值
onClose: () => {
this.mobile = '';
}
});
//然后结束执行
return;
}
//后台校验手机号是否符合要求
this.$axios({
url: this.$settings.base_url + '/user/mobile',
method: 'post',
data: {
mobile: this.mobile,
}
}).then(response => {
// 状态码为0，未注册，不能登录
if (response.data.status === 0) {
this.$message({
message: '该手机未注册',
type: 'warning',
duration: 1000,
onClose: () => {
this.mobile = '';
}
});
} else {
// 后台校验手机已注册可以进行登录操作
this.is_send = true;
}
});
},
发送验证码
send_sms() {
if (!this.is_send) return;
//点击发送验证码之后不能再次点击发送
this.is_send = false;
this.sms_interval = "发送中...";
// 后台请求：发送验证码，验证码发送成功才进入倒计时
this.$axios({
url: this.$settings.base_url + '/user/sms',
method: 'post',
data: {
mobile: this.mobile,
}
}).then(response => {
// 验证码发送失败
if (response.data.status === 1) {
this.sms_interval = "发送失败";
this.$message({
message: '验证码发送失败',
type: 'warning',
duration: 1000,
onClose: () => {
#重置发送验证码
this.sms_interval = '获取验证码';
this.is_send = true;
}
});
} else {
// 验证码发送成功，开始倒计时，60秒之后可以发送验证码
let sms_interval_time = 60;
//创建定时器，显示发送验证码倒计时
let timer = setInterval(() => {
#倒计时为0
if (sms_interval_time <= 1) {
#清除定时器
clearInterval(timer);
#重置发送验证码功能
this.sms_interval = "获取验证码";
this.is_send = true;
} else {
#倒计时递减-1
sms_interval_time -= 1;
this.sms_interval = `${sms_interval_time}秒后再发`;
}
}, 1000);
}
#请求频率大于后端频率认证，出错
}).catch(() => {
this.sms_interval = "发送过快";
this.$message({
message: '验证码发送发送频率过快',
type: 'warning',
duration: 1000,
onClose: () => {
this.sms_interval = '获取验证码';
this.is_send = true;
}
});
});
},
手机+验证码登录
login_mobile() {
//手机号和验证码都不能为空
if (!(this.mobile && this.sms)) return;
// 请求手机验证码登录
this.$axios({
url: this.$settings.base_url + '/user/login/mobile',
method: 'post',
data: {
mobile: this.mobile,
code: this.sms
}
}).then(response => {
let obj = response.data.data;
this.$message({
message: '登录成功',
type: 'success',
duration: 1000,
onClose: () => {
// 保存登录信息到cookies中，并关闭登录窗口
//存储用户信息和token字符串
this.$cookies.set('username', obj.username, '7d');
this.$cookies.set('token', obj.token, '7d');
//关闭登录窗口
this.$emit('close');
//更新用户的登录信息如用户名显示在主页
this.$emit('login_success');
}
});
}).catch(() => {
this.$message({
message: '登录失败',
type: 'warning',
duration: 1000,
onClose: () => {
//登录失败情况输入框内容
// this.mobile = '';
this.sms = '';
}
});
});
},
普通登录
login() {
//账号密码不能为空
if (!(this.username && this.password)) return;
// 账号密码登录
this.$axios({
url: this.$settings.base_url + '/user/login',
method: 'post',
data: {
username: this.username,
password: this.password
}
}).then(response => {
let obj = response.data.data;
this.$message({
message: '登录成功',
type: 'success',
duration: 1000,
onClose: () => {
// 保存登录信息到cookies中，并关闭登录窗口
this.$cookies.set('username', obj.username, '7d');
this.$cookies.set('token', obj.token, '7d');
// 关闭模态框
this.$emit('close');
// 让父组件Header更新登录的用户信息
this.$emit('login_success');
}
});
}).catch(() => {
this.$message({
message: '登录失败',
type: 'warning',
duration: 1000,
onClose: () => {
// this.username = '';
this.password = '';
}
});
});
}
注册
register() {
// if (!(this.mobile && this.password && this.sms)) return;
this.$axios({
url: this.$settings.base_url + '/user/register',
method: 'post',
data: {
'mobile': this.mobile,
'password': this.password,
'code': this.sms,
}
}).then(response => {
this.$message({
message: '注册成功',
type: 'success',
duration: 1000,
onClose: () => {
this.$emit('close')
}
});
}).catch(error => {
// 错误的响应数据 error.response.data
// console.log('>>>', error.response.data.data)
this.$message({
message: '注册失败',
type: 'warning',
duration: 1000,
onClose: () => {
this.mobile = '';
this.password = '';
this.sms = '';
}
});
})
}
