当前位置：首页 > VUE

vue短信验证怎么实现

2026-03-26 23:51:18VUE

Vue短信验证实现方法

短信验证是常见的用户身份验证方式，在Vue项目中可以通过以下步骤实现：

前端部分实现

安装必要的依赖包（如axios用于HTTP请求）：

npm install axios

创建短信验证组件：

vue短信验证怎么实现

<template>
  <div>
    <input v-model="phone" placeholder="请输入手机号"/>
    <button @click="sendCode" :disabled="isSending">
      {{ isSending ? `${countdown}秒后重试` : '获取验证码' }}
    </button>
    <input v-model="code" placeholder="请输入验证码"/>
    <button @click="verifyCode">验证</button>
  </div>
</template>

<script>
import axios from 'axios';

export default {
  data() {
    return {
      phone: '',
      code: '',
      isSending: false,
      countdown: 60
    }
  },
  methods: {
    sendCode() {
      if (!this.phone) return alert('请输入手机号');

      this.isSending = true;
      const timer = setInterval(() => {
        if (this.countdown <= 0) {
          clearInterval(timer);
          this.isSending = false;
          this.countdown = 60;
          return;
        }
        this.countdown--;
      }, 1000);

      axios.post('/api/send-sms', { phone: this.phone })
        .then(response => {
          alert('验证码已发送');
        })
        .catch(error => {
          clearInterval(timer);
          this.isSending = false;
          this.countdown = 60;
          alert('发送失败');
        });
    },
    verifyCode() {
      axios.post('/api/verify-code', {
        phone: this.phone,
        code: this.code
      }).then(response => {
        alert('验证成功');
      }).catch(error => {
        alert('验证失败');
      });
    }
  }
}
</script>

后端API实现

Node.js示例（使用Express框架）：

const express = require('express');
const bodyParser = require('body-parser');
const app = express();

app.use(bodyParser.json());

// 模拟存储验证码
const codeStorage = {};

app.post('/api/send-sms', (req, res) => {
  const { phone } = req.body;
  const code = Math.floor(1000 + Math.random() * 9000); // 生成4位验证码

  // 实际项目中这里调用短信服务商API
  console.log(`发送验证码${code}到${phone}`);

  // 存储验证码，设置5分钟有效期
  codeStorage[phone] = {
    code,
    expires: Date.now() + 300000
  };

  res.json({ success: true });
});

app.post('/api/verify-code', (req, res) => {
  const { phone, code } = req.body;
  const record = codeStorage[phone];

  if (!record || record.expires < Date.now()) {
    return res.status(400).json({ error: '验证码已过期' });
  }

  if (record.code !== code) {
    return res.status(400).json({ error: '验证码错误' });
  }

  delete codeStorage[phone];
  res.json({ success: true });
});

app.listen(3000, () => console.log('Server running on port 3000'));

短信服务集成

vue短信验证怎么实现