短信验证服务和登录的前端定义实现
Posted zhoujian_911
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了短信验证服务和登录的前端定义实现相关的知识，希望对你有一定的参考价值。
1 向src\\router\\index.js添加定义
path: '/LoginSms',
name: '手机号登录',
component: () => import('../views/LoginSmsView.vue')
,
path: '/Users/Register',
name: '用户注册',
component: () => import('../views/Users/RegisterView.vue'),
,
2 向src\\common\\http.api.js添加定义
/****************************API集中管理--用户模块************************************/
//通过1个指定电子邮箱获取1个指定的用户实例，该API主要用于验证电子邮箱的唯一性。
export const getCustomerByEmail = async params =>
return await axiosInterceptor.get('/Customer/IsEmail',
params: params
);
;
//通过1个指定手机号获取1个指定的用户实例，该API主要用于验证手机号的唯一性。
export const getCustomerByPhone = async params =>
return await axiosInterceptor.get('/Customer/IsPhone',
params: params
);
;
//通过1个指定手机号获取1个指定的有效短信验证码。
export const getCodeByPhone = async params =>
return await axiosInterceptor.get('/Customer/IsCode',
params: params
);
;
//把1个指定用户实例持久化到用户表中。
export const postCustomerRegister = async params =>
return await axiosInterceptor.post('/Customer/Register', params);
;
//向1个指定手机发送1个指定的短信验证码，并把该短信验证码实例例持久化到短信验证表中。
export const postSmsValidateCreate = async params =>
return await axiosInterceptor.post('/Customer/SmsValidateCreate', params);
;
//1个指定手机号的登录操作。
export const postCustomerLoginSms = async params =>
return await axiosInterceptor.post('/Customer/LoginSms', params);
;
3 src\\views\\Users\\RegisterView.vue
<template>
<el-form :model="registerForm" :rules="registerRule" ref="refRule" label-width="100px" class="demo-ruleForm"
label-position="left" status-icon>
<h3 class="title">用户注册</h3>
<el-form-item label="账号:" prop="name">
<el-input type="text" v-model="registerForm.name" maxlength="16" minlength="2" show-word-limit />
</el-form-item>
<el-form-item label="电子邮箱:" prop="email">
<el-input v-model="registerForm.email" />
</el-form-item>
<el-form-item label="手机号:" prop="phone">
<el-input type="text" v-model="registerForm.phone">
<template #prepend>+86</template>
</el-input>
</el-form-item>
<el-form-item label="密码:" prop="password">
<el-input type="password" v-model="registerForm.password" show-password />
</el-form-item>
<el-form-item label="确认密码:" prop="confirmPassword">
<el-input type="password" v-model="registerForm.confirmPassword" show-password />
</el-form-item>
</el-form>
<el-button type="primary" @click="onSubmit">提 交</el-button>
</template>
<script>
import
getCustomerByEmail,
getCustomerByPhone,
postCustomerRegister
from '../../common/http.api.js';
export default
data()
//验证1个指定的电子邮箱已经是否被注册。
const validateEmailUnique = async (rule, value, callback) =>
if (value)
let data = await this.isEmailUnique(value);
//console.log(data);
if (data.status == 200 && data.response)
callback(new Error("该电子邮箱已经被注册！"));
else
callback();
;
//验证1个指定的手机号已经是否被注册。
const validatePhoneUnique = async (rule, value, callback) =>
if (value)
let data = await this.isPhoneUnique(value);
// console.log(data);
if (data.status == 200 && data.response)
callback(new Error("该手机号已经被注册！"));
else
callback();
;
//验证密码与确认密码的输入是否一致。
const validateConfirmPassword = (rule, value, callback) =>
if (value === "")
callback(new Error("请输入确认密码！"));
else if (value !== this.registerForm.password)
callback(new Error("两次输入密码不一致!"));
else
callback();
;
return
//用户注册表单初始化。
registerForm:
name: '',
email: '',
phone: '',
password: '',
confirmPassword: '',
,
//用户注册表单输入验证初始化。
registerRule:
name: [
required: true,
message: '请输入账号名！',
trigger: 'blur',
,
min: 2,
max: 16,
message: '账号名的长度应在2到16个字符之间！',
trigger: 'blur'
,
],
email: [
required: true,
message: '请输入电子邮箱！',
trigger: 'blur',
,
pattern: /^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(.[a-zA-Z0-9_-])+/,
message: "电子邮箱格式错误！"
,
validator: validateEmailUnique,
trigger: "blur",
,
],
phone: [
required: true,
message: "请输入手机号！",
trigger: 'blur',
,
pattern: 11 && /^((13|14|15|16|17|18|19)[0-9]1\\d8)$/,
message: "手机号格式错误！"
,
validator: validatePhoneUnique,
trigger: "blur",
,
],
password: [
required: true,
message: "请输入密码！",
trigger: "blur"
,
min: 6,
max: 20,
message: "长度在6到20个字符！",
trigger: "blur",
,
required: true,
pattern: /^(?![a-zA-Z]+$)(?![A-Z0-9]+$)(?![A-Z\\W_!@#$%^&*`~()-+=]+$)(?![a-z0-9]+$)(?![a-z\\W_!@#$%^&*`~()-+=]+$)(?![0-9\\W_!@#$%^&*`~()-+=]+$)[a-zA-Z0-9\\W_!@#$%^&*`~()-+=]6,20$/,
message: "包含大小写字母、数字和特殊字符的三种！",
trigger: "blur",
,
],
confirmPassword: [
validator: validateConfirmPassword,
trigger: "blur"
, ],
,
;
,
methods:
//通过1个指定电子邮箱获取1个指定的用户实例，验证电子邮箱的唯一性。
async isEmailUnique(email)
let emailParam =
email: email,
;
let res = await getCustomerByEmail(emailParam);
return res.data;
,
//过1个指定手机号获取1个指定的用户实例，验证手机号的唯一性。
async isPhoneUnique(phone)
let phoneParam =
phone: phone,
;
let res = await getCustomerByPhone(phoneParam);
return res.data;
,
//添加提交事件
async onSubmit()
this.$refs.refRule.validate(async (valid) =>
if (valid)
let customer =
Name: this.registerForm.name,
Email: this.registerForm.email,
Phone: this.registerForm.phone,
Password: this.registerForm.password,
;
let res = await postCustomerRegister(JSON.stringify(customer));
if (res.status == 200)
this.$router.push('/LoginSms')
else
thi 以上是关于短信验证服务和登录的前端定义实现的主要内容，如果未能解决你的问题，请参考以下文章 Redis实战之Session实现短信登录以及Redis完善登录功能 基于SessionRedis 短信登录功能实现，解决Session共享，登录状态刷新问题及Threadlocal线程隔离