SpringBoot+Vue+Token实现登录验证码校验

最新推荐文章于 2024-06-08 14:40:13 发布
最新推荐文章于 2024-06-08 14:40:13 发布
阅读量1.1k 收藏 2
点赞数
分类专栏： Demo 文章标签： servlet java 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Su7148/article/details/128575628
版权

目录

流程简介

效果图

依赖

后端代码

验证码生成

验证码校验

前段代码

流程简介

借助hutool工具绘制二维码，用token存储验证码及过期时间，后端在响应头中放入token。前端将token存入vuex中，登陆时拿取。

效果图

依赖

  <!-- hutool -->
        <dependency>
            <groupId>cn.hutool</groupId>
            <artifactId>hutool-all</artifactId>
            <version>5.3.3</version>
        </dependency>
    
        <!-- jwt -->
        <dependency>
            <groupId>io.jsonwebtoken</groupId>
            <artifactId>jjwt</artifactId>
            <version>0.9.1</version>
        </dependency>

后端代码

后端主要分为两个流程：验证码生成，验证码校验。生成验证码借助Hutool工具，使用Jwt工具类加密存储、校验

验证码生成

controller

  @RequestMapping(value ="/verify")
    public void getVerify(HttpServletResponse response, HttpServletRequest request){
        response.setContentType("image/jpeg");
        //不缓存
        response.setHeader("Pragma","No-cache");
        response.setHeader("Cache-Control","no-cache");
        response.setDateHeader("Expire",0);
        RandomValidateCode code = new RandomValidateCode();
        try{
            code.creatRandCode(request,response);
            log.info("验证码生成成功");
            //下面方法是自己用java工具类绘制的验证码
           // code.getRandcode(request,response);
        }catch (Exception e){
            log.error("验证码生成失败");
        }
    }

绘制验证码

    public void creatRandCode(HttpServletRequest request, HttpServletResponse response) throws IOException {
        //hutool工具类 宽度 高度 位数 线条数
        LineCaptcha lineCaptcha = CaptchaUtil.createLineCaptcha(120, 40, 4, 15);
        lineCaptcha.write(response.getOutputStream());
        Long currentTimeMillis = System.currentTimeMillis();
        String signRandom = JwtUtils.signRandom(lineCaptcha.getCode(), currentTimeMillis);
        response.setHeader("CODEKEY", signRandom);
        response.setHeader("Access-Control-Expose-Headers", "CODEKEY");
    }

jwtUtils

@ConfigurationProperties(prefix = "Demo.jwt")

使用注解读取配置（验证码过期时间这里直接写到代码中了）

     private String secret;
    private long expire;
    private String header;
    public static final long RANDOM_TIME = 60*1000;
  

 /**
     * 放入验证码以及过期时间
     * 加密盐为 YunMengQingYanLou##Demo
     * @param code
     * @param currentTime
     * @return
     */
    public static  String signRandom(String code,Long currentTime){
        String token = null;
        Date expireDate = new Date(currentTime+RANDOM_TIME);
        token =  Jwts.builder()
                .claim("code",code)
                .claim("currentTime",currentTime)
                .setExpiration(expireDate)
                .signWith(SignatureAlgorithm.HS512, "YunMengQingYanLou##Demo")
                .compact();
        return token;
    }

验证码校验

只展示验证码相关逻辑

 @Override
    public SysResult login(LoginParam loginParam, HttpServletResponse response, HttpServletRequest request) throws IllegalAccessException {
        /**检查参数是否合法
         * 使用jwt生产token返回前端
         * token放入redis中  redis token user 设置过期时间
         */
        String account = loginParam.getAccount();
        String password = loginParam.getPassword();
        String verifyCode = loginParam.getVerifyCode();
        //获取验证码
        String codekey = request.getHeader("Codekey");
        try {
            Claims claim = JwtUtils.getClaim(codekey);
            String code = claim.get("code").toString();
            Long currentTime = (Long) JwtUtils.getClaim(codekey).get("currentTime");
            Long randomTime = currentTime + (Long) JwtUtils.RANDOM_TIME;
            log.info("验证码时间" + randomTime);
            long nowTime = System.currentTimeMillis();
            if (randomTime < nowTime) {
                return SysResult.fail("验证码已失效");
            }
            if (!verifyCode.equals(code)) {
                return SysResult.fail("验证码不正确");
            }
        } catch (Exception e) {
            log.error(e.getMessage());
            throw new IllegalAccessException("系统异常");
        }
         password = DigestUtils.md5DigestAsHex((password + slat).getBytes());
        SysUser sysUser = sysuserService.findUser(account);
        Assert.notNull(sysUser, "没有该用户");
        String pwd = sysUser.getPassword();
        if (!password.equals(pwd)) {
            return SysResult.fail("密码不正确");
        }
        String jwt = jwtUtils.generateToken(sysUser.getId());
        //将jwt输送Header
        response.setHeader("Authorization", jwt);
        response.setHeader("Access-control-Expose-Headers", "Authorization");
        return SysResult.success(sysUser);

    }

JwtUtils获得claim 注意加密盐一致

 /**
     * 校验 出错返回为空
     * @param token
     * @return
     */
    public static Claims getClaim(String token) {
        try {
            return Jwts.parser()
                    .setSigningKey("YunMengQingYanLou##Demo")
                    .parseClaimsJws(token)
                    .getBody();
        }catch (Exception e){
            log.error("Token解析异常 ", e);
            return null;
        }
    }

后端代码至此全部完毕

前段代码

前段代码逻辑主要是请求后端接口接受验证码信息，放入store中，登录时拿取并放入请求头

<template>
    <div class="background">
        <div class="log">
            <div class="title">YunMeng</div>
            <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
                <el-form-item label="用户名" prop="account">
                    <el-input v-model="ruleForm.account"></el-input>
                </el-form-item>

                <el-form-item label="密码" prop="password">
                    <el-input type="password" v-model="ruleForm.password"></el-input>
                </el-form-item>

                <el-form-item label="验证码" prop="verifyCode" class="veriftyCode">
                    <el-input type="verifyCode" style="width: 50%;" v-model="ruleForm.verifyCode"></el-input>
                    <img :src="verifyurl" alt="单击刷新" ref="verifyImg" class="verifyImg" @click="getVerifty()" />
                </el-form-item>

                <el-form-item>
                    <el-button type="primary" @click="submitForm('ruleForm')" style="width: 110px">登录</el-button>
                    <el-button @click="resetForm('ruleForm')" style="width: 120px">重置</el-button>
                </el-form-item>

            </el-form>
        </div>
    </div>
</template>

获取验证码Js

    mounted() {
            this.getVerifty()
        },
        methods: {
            getVerifty() {
                const _this = this;
                _this.$axios.get("/verify", {
                    responseType: 'blob'
                }).then(res => {
                    if (res) {
                        const verifycode = res.headers['codekey'];
                        _this.verifyurl = window.URL.createObjectURL(new Blob([res.data]))
                        _this.$store.commit("SET_VERIFTY", verifycode);
                    } else {
                        this.$message.error("获取验证码失败")
                    }
                })
            },

store/index.js

只看verifty相关代码即可

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

export default new Vuex.Store({
  state: {
    verifty:'',
    token:'',
    userInfo:JSON.parse(sessionStorage.getItem("userInfo")),
    menu:JSON.parse(sessionStorage.getItem("menu"))
  },
  mutations: {
      SET_VERIFTY:(state,verifty) =>{
        state.verifty = verifty
        sessionStorage.setItem("verifty",verifty)

      },
      
    SET_MENU:(state,menu) =>{
      state.menu = menu
      sessionStorage.setItem("menu",JSON.stringify(menu))

    },
    //数据的改变
    SET_TOKEN: (state,token) =>{
      state.token = token
      localStorage.setItem("token",token)
    },
    SET_USERINFO: (state,userInfo) =>{
      state.userInfo = userInfo
      sessionStorage.setItem("userInfo",JSON.stringify(userInfo))
      //不能存字符串
    },
    REMOVE_INFO:(state) =>{
      state.token = '';
       state.verifty = '';
      state.userInfo = {};
      state.menu='';
      localStorage.setItem("token",'')
      sessionStorage.setItem("userInfo", JSON.stringify(''))
      sessionStorage.setItem("menu",JSON.stringify(''))
      sessionStorage.setItem("verifty",'')
    }
  },
  getters:{
    getUser: state =>{
      return state.userInfo
    },
    getToken:state=>{
      return state.token
    },
    getMenu:state => {
      return state.menu
    },
    getVerifty:state => {
      return state.verifty
    }

  },
  actions: {
  },
  modules: {
  }
})

登录JS

submitForm(formName) {
                this.$refs[formName].validate((valid) => {
                    if (valid) {
                        const _this = this;
                        _this.$axios.post("/login", _this.ruleForm, {
                            headers: {
                                "Codekey":sessionStorage.getItem("verifty")
                            }
                        }).then(res => {
                            console.log(res)
                            if (res.data.status == 200) {
                                // //存储(共享)全局变量jwt和userInfo
                                const jwt = res.headers['authorization'];
                                const userInfo = res.data.data
                                const admin = userInfo.admin;
                                const avator = userInfo.avatar;
                                _this.$store.commit("SET_TOKEN", jwt);
                                _this.$store.commit("SET_USERINFO", userInfo)
                                console.log(userInfo)
                                _this.$router.push({
                                    path: "/home",
                                    query: {
                                        adminId: admin,
                                        pit: avator
                                    }
                                })
                            } else {
                                this.$message.error(res.data.msg)
                                this.getVerifty();
                            }
                        })
                    } else {
                        console.log('error submit!!');
                        return false;
                    }
                });
            },

前段完整代码

<template>
    <div class="background">
        <div class="log">
            <div class="title">YunMeng</div>
            <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
                <el-form-item label="用户名" prop="account">
                    <el-input v-model="ruleForm.account"></el-input>
                </el-form-item>

                <el-form-item label="密码" prop="password">
                    <el-input type="password" v-model="ruleForm.password"></el-input>
                </el-form-item>

                <el-form-item label="验证码" prop="verifyCode" class="veriftyCode">
                    <el-input type="verifyCode" style="width: 50%;" v-model="ruleForm.verifyCode"></el-input>
                    <img :src="verifyurl" alt="单击刷新" ref="verifyImg" class="verifyImg" @click="getVerifty()" />
                </el-form-item>

                <el-form-item>
                    <el-button type="primary" @click="submitForm('ruleForm')" style="width: 110px">登录</el-button>
                    <el-button @click="resetForm('ruleForm')" style="width: 120px">重置</el-button>
                </el-form-item>

            </el-form>
        </div>
    </div>
</template>

<script>
    export default {
        name: "Login",
        data() {
            return {
                verifyurl: '',
                ruleForm: {
                    account: '',
                    password: '',
                    verifyCode: ''
                },
                rules: {
                    account: [{
                            required: true,
                            message: '请输入用户名',
                            trigger: 'blur'
                        },
                        {
                            min: 3,
                            max: 15,
                            message: '长度在 3 到 15 个字符',
                            trigger: 'change'
                        }
                    ],
                    password: [{
                        required: true,
                        message: '请输入密码',
                        trigger: 'blur'
                    }],
                    verifyCode: [{
                        required: true,
                        message: '请输入验证码',
                        trigger: 'blur'
                    }],
                }
            };
        },
        mounted() {
            this.getVerifty()
        },
        methods: {

            getVerifty() {
                const _this = this;
                _this.$axios.get("/verify", {
                    responseType: 'blob'
                }).then(res => {
                    if (res) {
                        const verifycode = res.headers['codekey'];
                        _this.verifyurl = window.URL.createObjectURL(new Blob([res.data]))
                        _this.$store.commit("SET_VERIFTY", verifycode);
                    } else {
                        this.$message.error("获取验证码失败")
                    }
                })

            },
            submitForm(formName) {
                this.$refs[formName].validate((valid) => {
                    if (valid) {
                        const _this = this;
                        _this.$axios.post("/login", _this.ruleForm, {
                            headers: {
                                "Codekey":sessionStorage.getItem("verifty")
                            }
                        }).then(res => {
                            console.log(res)
                            if (res.data.status == 200) {
                                // //存储(共享)全局变量jwt和userInfo
                                const jwt = res.headers['authorization'];
                                const userInfo = res.data.data
                                const admin = userInfo.admin;
                                const avator = userInfo.avatar;
                                _this.$store.commit("SET_TOKEN", jwt);
                                _this.$store.commit("SET_USERINFO", userInfo)
                                console.log(userInfo)
                                _this.$router.push({
                                    path: "/home",
                                    query: {
                                        adminId: admin,
                                        pit: avator
                                    }
                                })
                            } else {
                                this.$message.error(res.data.msg)
                                this.getVerifty();
                            }
                        })
                    } else {
                        console.log('error submit!!');
                        return false;
                    }
                });
            },
            resetForm(formName) {
                this.$refs[formName].resetFields();
            }
        }
    }
</script>

<style scoped>

    .verifyImg {
        width: 96px;
        height: 40px;
        border-radius: 8px;
        vertical-align: middle;
        margin-left: 12px;
    }

    .background {
      
        background: url("../assets/35.jpg");
        width: 100%;
        height: 100%;
        position: fixed;
        background-size: 100% 100%;
    }

    .title {
        font-size: 70px;
        font-family: 黑体;
        color: black;
        margin-left: 30px;
        padding-top: 20px;
        text-align: center;
    }

    .log {
        background: rgba(255, 255, 255, 0.6);
        box-shadow: 0 5px 30px 0 rgba(0, 0, 0, 0.2);
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        width: 650px;
        height: 400px;
        border-radius: 20px;
    }

    .demo-ruleForm {
        margin-top: 30px;
        margin-left: 40px;
        max-width: 500px;
    }
</style>

 

云梦轻掩楼
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
SpringBoot+vue实现token认证登录
5年编程经验的老猿。
05-05 710
在Spring Boot和Vue.js中实现token认证登录是一种常见的前后端分离的认证机制。 以下是实现这一机制的基本步骤：
vue+springboot实现图形验证码Kaptcha
qq_634380940的博客
11-15 647
请求头中已经带cookie，然而响应头又set-cookie了，也就是cookie里的session id又被重置，为什么这样子？form使用了element-ui的组件，主要还是看img标签，src绑定了form.imgCodeUrl数据，点击图片时触发refreshCode更新图片验证码。上面refreshCode更新图片验证码的原理，其实就是在原网址后添加随机的参数来改变form.imgCodeUrl网址，实现img标签自动刷新请求。测试时，验证码图片能够生成显示，并能刷新。浏览器调试器显示如下。
Spring boot+VUE实现token验证
最新发布
初夏0811的博客
06-08 618
5.前端之后的每一个对后端的请求都要在请求头上带上token，后端查看请求头是否有token，拿到token检查是否过期，返回对应状态给前端。这个拦截器主要的功能就是，把一些没有token的请求拦截下来并返回错误信息，有token就可以直接通过。4.之后前端每一次权限操作如跳转路由，都需要判断是否存在token，若不存在，跳转至登录页。2.后端验证用户名和密码，若通过，生成一个token返回给前端。6.若token已过期，清除token信息，跳转至登录页。注意：这边拦截的是后端的接口，不是前端的，
Springboot+vue 前后端分离登录验证码功能
qq_43649937的博客
12-22 2551
Springboot vue
Vue实现验证码登录
不愧是暮言的博客
11-27 8834
在我们进行登录的时候，为了保护系统的安全性，也是防止恶意进行登录，进入到后台盗取数据，因此我们在登录的环节进行一定的安全保护，提升系统安全等级。在此我们运用阿拉伯数字和英文字母进行4位数的验证码校验，当然也可以进行多位字符进行校验，在此我使用生成4位验证码进行校验，后续会有滑块验证！！！！！！
[SpringBoot]使用token 短信验证码 Redis的功能实现基本的登陆注册操作（含Redis token 验证码如何配置）
XiAoRayL的博客
02-18 1529
浅谈对于登录注册业务的思路以及部分代码的实现 近期开始了与移动端项目的开发，由于我个人是后台方面的所以肯定避免不了要实现每个app都应该具有的功能：登录与注册，我一开始写也是感觉非常的没有头绪，所以这里写一篇博客分享给大家如何实现一个基本的登录与注册的功能，希望有意见也积极提出！ 那么首先先说一下标题提到的几个词汇的功能： token 如果我们每次关闭客户端再次打开的时候都需要进行登录操作甚至是每次访问controller之前都需要进行是否登录的判断，那么每次如果都要访问持久化数据库的话，那么对于服务器
Vue实现验证码功能
吴冬雪的博客
09-02 4892
本文实例为大家分享了Vue实现验证码的具体代码，供大家参考，具体内容如下 1.效果 2.代码 2.1 创建js组件 内容 （可直接粘贴过去，需要改宽度和高度，修改_init方法中的宽和高） function GVerify (options) { // 创建一个图形验证码对象，接收options对象为参数 this.options = { // 默认options参数值 id: '', // 容器Id canvasId: 'verifyCanvas', // canvas的I
vue+springboot+redis+kaptcha实现登录验证码
04-10
本教程将介绍如何结合Vue.js前端框架、Spring Boot后端框架、Redis缓存服务以及Kaptcha验证码技术，实现一个前后端分离的登录页面验证码功能。这个组合可以提供高效、安全且用户友好的验证机制。 首先，Vue.js是一...
基于SpringBoot+Vue+sa-token前后端分离的科研项目管理平台源代码
06-16
基于SpringBoot+Vue+sa-token前后端分离的科研项目管理平台 前端采用Vue、Element UI 后端采用Spring Boot、Redis & Jwt。 Sa-Token：一个轻量级 java 权限认证框架，让鉴权变得简单、优雅！ 权限认证使用Jwt，支持...
前后端 springboot+Vue 实现登录注册功能
07-13
第一次做 还是后端错了 大佬勿喷 有不对的请多多指教呀
信用：springboot + vue实现的短信验证码demo
02-14
基于springboot的短信验证码简易demo使用技术springboot + springdatajpa + vue.js + axios + activemq + redis整合的第三方平台阿里大于短信平台项目描述这是一个使用阿里大于短信平台接口的登录demo，意在让大家...
vue+springboot实现登录功能.rar
03-16
该项目结构完整，代码齐全，配有运行说明文档，前后端分离，主要用到了vue、springboot与Mybatis整合，Mysql数据库，适合初学者使用，通过一个简单的登录实例，了解运行原理。
SpringBoot + Vue使用MQTT实现智慧停车系统.zip
04-22
基于 SpringBoot + Vue 的智能停车场项目。 背景 在现代城市中，交通拥堵和停车难题一直是令人头疼的难题。为了解决这一问题，智慧停车系统应运而生。智慧停车系统利用物联网技术和实时数据传输，提供了一种更智能...
【SpringBoot+Vue】前后端分离项目之图形验证码
m0_65563175的博客
12-08 2278
在做自己的项目了解到了关于验证码的知识，但还没有去了解手机验证码的功能，这里只是浅浅的实现了关于图形验证码的样式，如下图所示。当然，点击验证码还可以做到刷新。
vue发送Http请求之XMLHttpRequest
weixin_44839328的博客
05-11 3660
浏览器报错：Cannot read property ‘push’ of undefined at XMLHttpRequest.ajaxObj.onreadyst vue中发送Http请求，这里说明不会使用axios ，baseUrl已经又过了，不想在创建baseUrl，所以采用http请求，请求发送成功。 因为跨域原因，所以内部this不能赋值。 xhr.onreadystatechange = function()导致此引用更改为XMLHttpRequest对象.因此,this.custom.
SpringBoot+Vue3实现登录验证码功能
心态的博客
04-27 4431
登录页面都会有输入用户名、密码和验证码而判断用户是否登录成功做出响应的操作。输入用户名和密码提交表单做登录验证这个相信看到这篇文章的小伙伴们都是小问题（熟练地不能在熟练了）。但这个验证码用户点击刷新验证码，用户填写后才能正常登录。随机生成图片验证码就会有些疑惑，不知道该怎么做。 这篇文章我们就来重点看如何生成验证码，前端如何展示，如何点击验证码后会换张图片（就是常见到的“看不清？换一张图”）这一功能。
springboot+vue实现手机验证码功能
weerrqq的博客
03-06 2100
springboot，vue,手机验证码
spring boot前后端分离，jwt+vue实现登录验证
qq_55648724的博客
11-23 1226
登录分离
Token：用户身份验证的令牌
hanbing1307的博客
03-11 2360
存储的主要是一个用户 id，其他的用户信息都存储在服务器的 Session 中，而 Token 没有内存限制，用户信息可以存储 Token 中，返回给用户自行存储，因此可以看出，采用 Cookie 的话，由于所有用户都需要在服务器的 Session 中存储相对应的用户信息，所以如果用户量非常大，这对于服务器来说，将是非常大的性能压力，而Token 将用户信息返回给客户端各自存储，也就完全避开这个问题了。如果前端使用用户名/密码向服务端请求认证，服务端认证成功，那么在服务端会返回Token给前端。
springboot+vue前后端分离 + security + JWT 实现token登录
04-04
以上是实现Spring Boot和Vue.js前后端分离的步骤，我们可以使用Security和JWT来实现安全的登录和授权机制。这种开发模式可以让我们更好地实现前后端分离，提高我们的开发效率和应用程序的安全性。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值