Vue实现验证码登录

这篇具有很好参考价值的文章主要介绍了Vue实现验证码登录。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

在我们进行登录的时候,为了保护系统的安全性,也是防止恶意进行登录,进入到后台盗取数据,因此我们在登录的环节进行一定的安全保护,提升系统安全等级。在此我们运用阿拉伯数字和英文字母进行4位数的验证码校验,当然也可以进行多位字符进行校验,在此我使用生成4位验证码进行校验

验证码:前端绑定后端生成得验证码图片,前端提交表单信息到后端进行验证,后端验证码存入session 

一、环境准备:

我这里由于本机上的还是vue 2 所以这边还是vue2开发的,而且主要是好嫖组件,毕竟不是专业的前端。
这里的话由于某些原因,我这里使用的包管理是 cnpm
不为别的就为了安装的时候不会被雷到。
这里先装一个 vuex 用来管理状态,怎么装一条命令的事情。 

二、功能展示:

Vue实现验证码登录

三、项目结构:

 Vue实现验证码登录

四、验证码生成:

Vue实现验证码登录

<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
      // 将当前数据派发出去
      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进行解决:

Vue实现验证码登录  

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

const request = axios.create({
    baseURL: `http://localhost:9090`,  // 注意!! 这里是全局统一加上了 '/api' 前缀,也就是说所有接口都会加上'/api'前缀在,页面里面写接口的时候就不要加 '/api'了,否则会出现2个'/api',类似 '/api/api/user'这样的报错,切记!!!
    timeout: 5000
})

// request 拦截器
// 可以自请求发送前对请求做一些处理
// 比如统一加token,对请求参数统一加密
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;  // 设置请求头
    }

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

// response 拦截器
// 可以在接口响应后统一处理结果
request.interceptors.response.use(
    response => {
        let res = response.data;
        // 如果是返回的文件
        if (response.config.responseType === 'blob') {
            return res
        }
        // 兼容服务端返回的字符串数据
        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.在需要的页面进行引入

Vue实现验证码登录

<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.验证码校验

Vue实现验证码登录Vue实现验证码登录

<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/学习.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" 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("请填写验证码")
            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'

Vue实现验证码登录

* {
    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;
}

⛵小结

以上就是对Vue实现路由导航简单的概述,使得我们的项目更加的趋于完美,也提升了我们对于编程的能力和思维!

如果这篇文章有帮助到你,希望可以给作者点个赞👍,创作不易,如果有对后端技术、前端领域感兴趣的,也欢迎关注 ,我将会给你带来巨大的收获与惊喜💝💝💝!文章来源地址https://www.toymoban.com/news/detail-499378.html

到了这里,关于Vue实现验证码登录的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 【项目功能模块拆分】SpringBoot+vue实现登录图片验证码

    要在Spring Boot和Vue中实现登录时的图片验证码功能,可以按照以下步骤进行操作: 后端(Spring Boot)实现: 添加相关依赖:在 pom.xml文件中添加以下依赖: 创建一个验证码生成器:创建一个CaptchaGenerator类,用于生成验证码图片。 创建一个REST API接口:创建一个 CaptchaControlle

    2024年02月11日
    浏览(35)
  • 【项目功能模块拆分】SpringBoot+vue实现登录手机验证码

    要在Spring Boot和Vue中实现登录需要手机验证码功能,你需要进行以下步骤: 后端(Spring Boot)实现: 添加相关依赖:在pom.xml文件中添加以下依赖: 创建一个验证码生成器:创建一个 CaptchaGenerator类,用于生成手机验证码。 创建一个REST API接口:创建一个 CaptchaController类,用于

    2024年02月11日
    浏览(38)
  • 2022.9.17 vue、element-ui实现登录获取手机验证码,进行手机号校验、验证码CD60秒

    1、直接点击,不为空校验 2、输入手机号格式不正确时 3、获取完验证码进行读秒 三、vue 1、进行手机号校验关键在对单个手机号输入框进行校验,需要使用到validateField对部分表单字段进行校验,valid是校验完的提示信息,当valid为空时代表校验成功 2、读秒和设置禁用,在校

    2024年02月11日
    浏览(47)
  • Vue项目实战——【基于 Vue3.x + Vant UI】实现一个多功能记账本(登录注册页面,验证码)

    系列内容 参考链接 基于 Vue3.x + Vant UI 的多功能记账本(一) 项目演示,涉及知识点 基于 Vue3.x + Vant UI 的多功能记账本(二) 搭建开发环境 基于 Vue3.x + Vant UI 的多功能记账本(三) 开发导航栏及公共部分 项目演示 Vue3 + Vant UI_多功能记账本 1、登录注册页面 页面设计,页面

    2024年02月03日
    浏览(76)
  • 用Abp实现两步验证(Two-Factor Authentication,2FA)登录(二):Vue网页端开发

    @ 目录 发送验证码 登录 退出登录 界面控件 获取用户信息功能 项目地址 前端代码的框架采用vue.js + elementUI 这套较为简单的方式实现,以及typescript语法更方便阅读。 首先添加全局对象: loginForm: 登录表单对象 twoFactorData: 两步验证数据, showTwoFactorSuccess: 是否显示两步验证成

    2023年04月12日
    浏览(36)
  • vue3使用el-form实现登录、注册功能,且进行表单验证(Element Plus中的el-form)

    简介:Element Plus 中的 el-form 是一个表单组件,用于快速构建表单并进行数据校验。它提供了丰富的表单元素和验证规则,使表单开发变得更加简单和高效。可以搭配el-dialog实现当前页面的登录、注册页 ,这两天在vue3中用到了表单登录,特意记录一下,这里没有封装,直接使

    2024年02月07日
    浏览(73)
  • 前端Vue自定义验证码密码登录切换tabs选项卡标签栏标题栏 验证码登录模版 密码登录模版

    前端Vue自定义验证码密码登录切换tabs选项卡标签栏标题栏 验证码登录模版 密码登录模版, 请访问uni-app插件市场地址:https://ext.dcloud.net.cn/plugin?id=13221 效果图如下: 实现代码如下: 使用方法 HTML代码实现部分 组件实现代码

    2024年02月11日
    浏览(57)
  • token + localstorage 验证登录(vue)详细教程

    token : 本质是验证身份的令牌,一般由用户通过账户密码登录后,服务端把这些凭证通过加密等一些列操作后得到的字符串。 token 登录流程: 客户端用账户密码请求登录; 服务端接收请求,验证账户密码; 验证成功后,服务端发送token给客户端; 客户端接收到token后保存,

    2023年04月21日
    浏览(37)
  • SpringBoot整合jwt+redis+随机验证码+Vue的登录功能

    !注意:前端的Vue项目中要引入element-ui和axios # npm安装element-ui、axios npm insatll element-ui -S npm install axios -S # 在main中引入

    2024年02月10日
    浏览(44)
  • JavaGui实现登录界面编写+实现账号密码验证登录+文件存储

    目录 标题一: 登录界面编写 标题二;登录界面之注册(一个类)编写  标题三:登录界面之登录编写  在登录界面这里,我们先编写一个登录界面出来,这只是一个界面,还没有实现验证账号密码和注册的功能,但得有这个界面做媒介 。 界面如下:   1.登陆界面代码在这里

    2024年02月08日
    浏览(57)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包