Vue项目：如何实现短信验证码登录？

验证码登录？"/>

Vue项目：如何实现短信验证码登录？

1.选择一个短信平台，这里选择网建短信通，在该平台进行注册。
.shtml
2.在该平台进行登录，点开接口设置功能可以看到用户名，安全密钥以及短信签名，如果发送的短信内容是验证码的话，最好加上短信签名，如在短信签名输入框中写：安全公司


3.在项目中进行功能的实现
Step1：安装axios依赖
方法：
1.在package.json中的dependencies中添加"axios": "^0.21.1",
2.在终端命令行中输入npm install，进行安装

Step2：在vue.config.js中配置跨域

devServer: {proxy: {'/note': {target: '/',changeOrigin: true,pathRewrite: {'^/note': ''}}}},

tips：此处target是短信网站的url，采用utf-8编码，可以在该网站更换编码方式

Step3：在登陆页面实现功能
在本项目中要实现点击获取验证码的链接，就能收到验证码短信

<el-link class="get-code-link" type="primary" @click="createCodeAndSend">获取验证码</el-link>

// 生成六位的数字验证码并发送短信createCodeAndSend() {if (this.loginForm.phone != null) {// this.$refs.loginFormRef.validate(async valid => {//   if (!valid) return// 生成六位数字验证码var codeLength = 6var createPhoneCode = ''// foreach循环，六次for (var i = 0; i < codeLength; i++) {var index = Math.floor(Math.random() * (9))index = index.toString()createPhoneCode += index}// 发送验证码短信给用户const text = '【验证码】' + createPhoneCode + '\n【您正在使用登陆功能,该验证码仅用于身份验证,在五分钟之内有效，请勿泄露给其他人使用。】' const param = new URLSearchParams()param.append('Uid', 之前登录后看到的用户名（字符串）)param.append('Key', 之前登录后看到的安全密钥（字符串）)param.append('smsMob', this.loginForm.phone)param.append('smsText', text)this.$http.post('/note/', param, {headers: {'Content-Type': 'application/x-www-form-urlencoded;charset=UTF-8'}}).then(function (response) {console.log(response)})// })} else {this.$message.warning('清输入手机号！')}}

实现效果：

点击获取验证码后收到短信

                                           感谢收阅