Vue實現(xiàn)驗證碼登錄全過程

更新時間：2025年03月20日 09:38:12 作者：沙漠真有魚

這篇文章主要介紹了Vue實現(xiàn)驗證碼登錄全過程,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教

一、環(huán)境準(zhǔn)備

我這里由于本機(jī)上的還是vue 2 所以這邊還是vue2開發(fā)的，而且主要是好嫖組件，畢竟不是專業(yè)的前端。

這里的話由于某些原因，我這里使用的包管理是 cnpm

不為別的就為了安裝的時候不會被雷到。

這里先裝一個 vuex 用來管理狀態(tài)，怎么裝一條命令的事情。

二、功能展示

三、項目結(jié)構(gòu)

四、驗證碼生成

<template>
  <div class="ValidCode disabled-select"
       :style="`width:${width}; height:${height}`"
       @click="refreshCode">
    <span v-for="(item, index) in codeList"
          :key="index"
          :style="getStyle(item)">
      {{item.code}}
    </span>
  </div>
</template>
<script>
export default {
  name: "ValidCode",
  model: {
    prop: 'value',
    event: 'input'
  },
  props: {
    width: {
      type: String,
      default: '100px'
    },
    height: {
      type: String,
      default: '34px'
    },
    length: {
      type: Number,
      default: 4
    }
  },
  data () {
    return {
      codeList: []
    }
  },
  mounted () {
    this.createdCode()
  },
  methods: {
    refreshCode () {
      this.createdCode()
    },
    createdCode () {
      const len = this.length
      const codeList = []
      const chars = 'ABCDEFGHJKMNPQRSTWXYZabcdefhijkmnprstwxyz0123456789'
      const charsLen = chars.length
      // 生成
      for (let i = 0; i < len; i++) {
        const rgb = [Math.round(Math.random() * 220), Math.round(Math.random() * 240), Math.round(Math.random() * 200)]
        codeList.push({
          code: chars.charAt(Math.floor(Math.random() * charsLen)),
          color: `rgb(${rgb})`,
          fontSize: `1${[Math.floor(Math.random() * 10)]}px`,
          padding: `${[Math.floor(Math.random() * 10)]}px`,
          transform: `rotate(${Math.floor(Math.random() * 90) - Math.floor(Math.random() * 90)}deg)`
        })
      }
      // 指向
      this.codeList = codeList
      // 將當(dāng)前數(shù)據(jù)派發(fā)出去
      this.$emit('input', codeList.map(item => item.code).join(''))
    },
    getStyle (data) {
      return `color: ${data.color}; font-size: ${data.fontSize}; padding: ${data.padding}; transform: ${data.transform}`
    }
  }
}
</script>
<style scoped >
.ValidCode{
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  span{
    display: inline-block;
  }
}
</style>

五、驗證碼使用

1.首先需要解決的是登錄的跨域問題，使用我們的axios進(jìn)行解決:

import axios from 'axios'
import {serverIp} from "../../public/config";

const request = axios.create({
    baseURL: `http://localhost:9090`,  // 注意??！ 這里是全局統(tǒng)一加上了 '/api' 前綴，也就是說所有接口都會加上'/api'前綴在，頁面里面寫接口的時候就不要加 '/api'了，否則會出現(xiàn)2個'/api'，類似 '/api/api/user'這樣的報錯，切記?。?！
    timeout: 5000
})

// request 攔截器
// 可以自請求發(fā)送前對請求做一些處理
// 比如統(tǒng)一加token，對請求參數(shù)統(tǒng)一加密
request.interceptors.request.use(config => {
    config.headers['Content-Type'] = 'application/json;charset=utf-8';
    let user = localStorage.getItem("user") ? JSON.parse(localStorage.getItem("user")) : {}
    if (user) {
        config.headers['token'] = user.token;  // 設(shè)置請求頭
    }

    return config
}, error => {
    return Promise.reject(error)
});

// response 攔截器
// 可以在接口響應(yīng)后統(tǒng)一處理結(jié)果
request.interceptors.response.use(
    response => {
        let res = response.data;
        // 如果是返回的文件
        if (response.config.responseType === 'blob') {
            return res
        }
        // 兼容服務(wù)端返回的字符串?dāng)?shù)據(jù)
        if (typeof res === 'string') {
            res = res ? JSON.parse(res) : res
        }
        return res;
    },
    error => {
        console.log('err' + error) // for debug
        return Promise.reject(error)
    }
)


export default request

2.在需要的頁面進(jìn)行引入

<script>
import request from "@/utils/request";
import ValidCode from "@/components/ValidCode";
const Base64 = require('js-base64').Base64

export default {
  name: "Login",
  components: {
    ValidCode
  },
  data() {
    return {
      form: {
        sex: 1,
        username: '',
        password: '',
      },
      checked: false,
      rules: {
        username: [
          {required: true, message: '請輸入用戶名', trigger: 'blur'},
          {min: 3, max: 10, message: "長度在3到10個字符", trigger: "blur"},
        ],
        password: [
          {required: true, message: '請輸入密碼', trigger: 'blur'},
          {min: 1, max: 20, message: '長度在 6 到 11 個字符', trigger: 'blur'}
        ],
      },
      validCode: '',
    }
  },
}
</script>

3.驗證碼校驗

<ek-form-item>
    <div style="display: flex">
        <el-input v-model="form.validCode" style="width: 60%" placeholder="請輸入驗證碼" size="medium"></el-input>
        <ValidCode @input="createValidCode" />
    </div>
</ek-form-item>

export default {
  name: "Login",
  components: {
    ValidCode
  },
  data() {
    return {
      form: {
        sex: 1,
        username: '',
        password: '',
      },
      checked: false,
      rules: {
        username: [
          {required: true, message: '請輸入用戶名', trigger: 'blur'},
          {min: 3, max: 10, message: "長度在3到10個字符", trigger: "blur"},
        ],
        password: [
          {required: true, message: '請輸入密碼', trigger: 'blur'},
          {min: 1, max: 20, message: '長度在 6 到 11 個字符', trigger: 'blur'}
        ],
      },
      validCode: '',
    }
  },
}

4.完整代碼

<template>
  <div style="height: 100vh; overflow: hidden">
    <div style="height: 50px;
      line-height: 50px;
      border-bottom: 2px solid var(--colorRed);
      padding-left: 20px;
      color: var(--colorRed)">
      <b style="font-size: 24px;">xx宿舍</b>
      <i style="margin-left: 20px">-- 只為更好的你</i>
    </div>
    <div style="width: 50%;
      margin: 50px auto;
      border-radius: 10px;
      box-shadow: 0 0 10px -2px cornflowerblue;
      display: flex">
      <div style="flex: 1; padding: 50px 50px">
        <img src="../assets/images/學(xué)習(xí).png" alt="" style="width: 100%;">
      </div>
      <div style="flex: 1; padding: 20px">
        <div class="form-toggle">
          <b >賬號登錄</b>
        </div>
        <el-form ref="form" :model="form" size="normal" :rules="rules" >
          <el-form-item prop="username" class="props">
            <el-input  placeholder="賬號" clearable v-model="form.username" prefix-icon="el-icon-user" />
          </el-form-item>
          <el-form-item prop="password" class="props">
            <el-input placeholder="密碼" v-model="form.password" show-password prefix-icon="el-icon-lock" />
          </el-form-item>
          <ek-form-item>
            <div style="display: flex">
              <el-input v-model="form.validCode" style="width: 60%" placeholder="請輸入驗證碼" size="medium"></el-input>
              <ValidCode @input="createValidCode" />
            </div>
          </ek-form-item>
          <el-form-item style="padding-top:15px">
            <el-button type="primary" style="width: 100%" @click="login" round>登 錄</el-button>
          </el-form-item>
<!--          <el-form-item>-->
            <div style="margin: 10px 0; text-align: right;">
              <a href="/register" rel="external nofollow"  style="color: var(--colorRed)">立即注冊</a>
            </div>
<!--            <el-button  style="width: 100%" @click="register" round>點擊注冊</el-button>-->
<!--          </el-form-item>-->
        </el-form>
      </div>
    </div>
  </div>
</template>

<script>
import request from "@/utils/request";
import ValidCode from "@/components/ValidCode";
const Base64 = require('js-base64').Base64

export default {
  name: "Login",
  components: {
    ValidCode
  },
  data() {
    return {
      form: {
        sex: 1,
        username: '',
        password: '',
      },
      checked: false,
      rules: {
        username: [
          {required: true, message: '請輸入用戶名', trigger: 'blur'},
          {min: 3, max: 10, message: "長度在3到10個字符", trigger: "blur"},
        ],
        password: [
          {required: true, message: '請輸入密碼', trigger: 'blur'},
          {min: 1, max: 20, message: '長度在 6 到 11 個字符', trigger: 'blur'}
        ],
      },
      validCode: '',
    }
  },
  mounted () {
    let username = localStorage.getItem('username')
    if (username) {
      this.form.username = localStorage.getItem('username')
      this.form.password = Base64.decode(localStorage.getItem('password'))// base64解密
      this.checked = true
    }
  },
  created() {
    sessionStorage.removeItem("user")
  },
  methods: {
    register:function(){
      this.$router.push("/register");
    },
    //接收驗證碼組件提交的4位驗證碼
    createValidCode(data) {
      this.validCode = data
    },
    login() {
      this.$refs['form'].validate((valid) => {
        if (valid) {
          if (!this.form.validCode) {
            this.$message.error("請?zhí)顚戲炞C碼")
            return
          }
          if (this.form.validCode.toLowerCase() !== this.validCode.toLowerCase()) {
            this.$message.error("驗證碼錯誤")
            return
          }
          request.post("/user/login", this.form).then(res => {
            if (res.code === '200'){
              // sessionStorage.setItem("user", JSON.stringify(res.data))//緩存用戶信息
              localStorage.setItem("user", JSON.stringify(res.data))
              if (res.data.role === 'USER') {
                this.$router.push("/")
              } else {
                this.$router.push("/mall/index")
              }
              this.$message({
                type: "success",
                message: "登錄成功"
              })
            } else {
              this.$message({
                type: "error",
                message: res.msg
              })
            }
          })
        }
      });
    },
  }
}
</script>

<style scoped>
.form-toggle {
  margin: 20px 0;
  text-align: center
}
.form-toggle b {
  font-size: 20px;
  cursor: pointer;
}
</style>

附送

全局定義css并在main.js里面引入

import './assets/css/global.css'

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
.ml-5 {
    margin-left: 5px;
}
.ml-10 {
    margin-left: 10px;
}
.mr-5 {
    margin-right: 5px;
}
.pd-10 {
    padding: 10px;
}
body {
    margin: 0;
    padding: 0;
    font-size: 14px;
    color: #666;
    --colorRed: orangered;
}
a {
    text-decoration: none;
}