ssh,ssm整合redis存储验证码

尽力漂亮

于 2019-11-30 20:29:25 发布

阅读量2.7k

点赞数 2

文章标签： redis存储验证码 ssm验证码

本文链接：https://blog.csdn.net/weixin_44106334/article/details/103328696

版权

ssh整合redis存储验证码

SSM整合redis存储验证码
SSH

SSM整合redis存储验证码

思路

登录界面向后台请求验证码，后台就先调用随机函数生成验证码，并且根据验证码生成一张图片，以 base64 字符串的形式传到前台，这时我们还要生成verificationJwt令牌做为请求验证码客户端的区分。我们先将验证码信息存入redis。key是 verificationJwt令牌的值，value就是验证码了。并且将令牌放入到响应头。传给客户端。当客户端提交的时候将保持的verificationJwt令牌放入请求头带过来。后端根据前端传过来的 jwt令牌去redis中获取数据，将验证码拿到后和现有的验证码进行比较。看看是否相等

在这里插入图片描述

思路图解

获取验证码部分：

图解1.这里全文都使用着两个令牌**，一张是jwt令牌（用于判断是否登录后所看到的资源），一张是verificationJwt(验证码)**
在这里插入图片描述

图解2.登录界面向后台请求验证码，后台就先调用随机函数生成验证码，并且根据验证码生成一张图片，以 base64 字符串的形式传到前台，这时我们还要生成verificationJwt令牌做为请求验证码客户端的区分。我们先将验证码信息存入redis。key是 verificationJwt令牌的值，value就是验证码了。

并将令牌放入到响应头。传给客户端

（Debug调试）
在这里插入图片描述
redis存储成功

得到后台相应返回的头verificationjwt

在这里插入图片描述
保存verificationJwt到vuex

登录部分

当客户端提交的时候将保持的verificationJwt令牌放入请求头带过来。后端根据前端传过来的 jwt令牌去redis中获取数据，将验证码拿到后和现有的验证码进行比较。看看是否相等

细节

注意：
这里请求头同时发送了两个jwt,还有验证码的jwt,访问报404forbidden，
原因：
jwt是用来登录
verificationJwt
加粗样式

详细代码

前端

State.js（定义vuex变量）



export default {
	resturantName: '飞歌餐馆',
	jwt:'',
	options: [],//存放tab页的容器
    activeIndex: '',//激活的tab页路由路径
	showName:'show',//tab页的标题
	role:"",//用来区分是否是因为左侧菜单被点击造成的路由路径发生改变，是：pass；不是：nopass
	verificationJwt:null, //这是用来保存用户等登录验证码jwt身份识别的
}

Mutations.js（set方法）

setVerificationJwt: (state, payload) => {
		state.verificationJwt = payload.verificationJwt;
	}

Getters.js（get方法）

getVerificationJwt:(state) =>{
		return state.verificationJwt;
	}

action.js

/**
 * 对后台请求的地址的封装，URL格式如下：
 * 模块名_实体名_操作
 */
export default {
	
	//ssh
// 	'SERVER': 'http://localhost:8080/T216_SSH', //服务器
// 	'SYSTEM_USER_DOLOGIN': '/vue/userAction_login.action', //用户登陆
// 	'VERIFICATION': '/vue/userAction_userCode.action', //验证码验证


	// 	ssm
		'SERVER': 'http://localhost:8080/ssm', //服务器
		'SYSTEM_USER_DOLOGIN': '/vue/user/login', //用户登陆
		'VERIFICATION': '/vue/user/verificationCode', //验证码验证


	'SYSTEM_USER_DOREG': '/vue/userAction_reg.action', //用户注册
	'SYSTEM_MENU_TREE': '/vue/treeNodeAction.action', //左侧树形菜单加载
	'SYSTEM_ARTICLE_LIST': '/vue/articleAction_list.action', //文章列表
	'SYSTEM_ARTICLE_ADD': '/vue/articleAction_add.action', //文章新增
	'SYSTEM_ARTICLE_EDIT': '/vue/articleAction_edit.action', //文章修改
	'SYSTEM_ARTICLE_DEL': '/vue/articleAction_del.action', //文章删除
	'SYSTEM_USER_GETASYNCDATA': '/vue/userAction_getAsyncData.action', //vuex中的异步加载数据
	'getFullPath': k => { //获得请求的完整地址，用于mockjs测试时使用
		return this.SERVER + this[k];
	}
}

http.js



/**
 * vue项目对axios的全局配置
 */
import axios from 'axios'
import qs from 'qs'

//引入action模块，并添加至axios的类属性urls上
import action from '@/api/action'
axios.urls = action

// axios默认配置
axios.defaults.timeout = 10000; // 超时时间
// axios.defaults.baseURL = 'http://localhost:8080/j2ee15'; // 默认地址
axios.defaults.baseURL = action.SERVER;

//整理数据
// 只适用于 POST,PUT,PATCH，transformRequest` 允许在向服务器发送前，修改请求数据
axios.defaults.transformRequest = function(data) {
	data = qs.stringify(data);
	return data;
};


// 请求拦截器
axios.interceptors.request.use(function(config) {
	//设置验证码jwt令牌
	let verificationJwt = window.vm.$store.getters.getVerificationJwt;
	if (verificationJwt) {
		config.headers['verificationJwt'] = verificationJwt;
	}


	var jwt = window.vm.$store.getters.getJwt;
	config.headers['jwt'] = jwt;
	return config;
}, function(error) {
	return Promise.reject(error);
});


// 响应拦截器

axios.interceptors.response.use(function(response) {
	// debugger;
	//保存验证码jwt令牌
	let verificationjwt = response.headers['verificationjwt'];
	if (verificationjwt) {
		window.vm.$store.commit('setVerificationJwt', {
			verificationJwt: verificationjwt
		});
	}
	
	var jwt = response.headers['jwt'];
	if (jwt) {
		window.vm.$store.commit('setJwt', {
			jwt: jwt
		});
	}
	return response;
}, function(error) {
	return Promise.reject(error);
});

// // 路由请求拦截
// // http request 拦截器
// axios.interceptors.request.use(
// 	config => {
// 		//config.data = JSON.stringify(config.data);  
// 		//config.headers['Content-Type'] = 'application/json;charset=UTF-8';
// 		//config.headers['Token'] = 'abcxyz';
// 		//判断是否存在ticket，如果存在的话，则每个http header都加上ticket
// 		// if (cookie.get("token")) {
// 		// 	//用户每次操作，都将cookie设置成2小时
// 		// 	cookie.set("token", cookie.get("token"), 1 / 12)
// 		// 	cookie.set("name", cookie.get("name"), 1 / 12)
// 		// 	config.headers.token = cookie.get("token");
// 		// 	config.headers.name = cookie.get("name");
// 		// }
// 		return config;
// 	},
// 	error => {
// 		return Promise.reject(error.response);
// 	});

// // 路由响应拦截
// // http response 拦截器
// axios.interceptors.response.use(
// 	response => {
// 		if (response.data.resultCode == "404") {
// 			console.log("response.data.resultCode是404")
// 			// 返回 错误代码-1 清除ticket信息并跳转到登录页面
// 			//      cookie.del("ticket")
// 			//      window.location.href='http://login.com'
// 			return
// 		} else {
// 			return response;
// 		}
// 	},
// 	error => {
// 		return Promise.reject(error.response) // 返回接口返回的错误信息
// 	});



export default axios;

后端

在这里插入图片描述

在这里插入图片描述
redis的pom.xml

       <dependency>
            <groupId>redis.clients</groupId>
            <artifactId>jedis</artifactId>
            <version>${redis.version}</version>
        </dependency>
        <dependency>
            <groupId>org.springframework.data</groupId>
            <artifactId>spring-data-redis</artifactId>
            <version>${redis.spring.version}</version>
        </dependency>

完整pom.xml

<?xml version="1.0" encoding="UTF-8"?>

<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
         xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsd">
    <modelVersion>4.0.0</modelVersion>

    <groupId>com.wxm</groupId>
    <artifactId>ssm</artifactId>
    <version>1.0-SNAPSHOT</version>
    <packaging>war</packaging>

    <name>ssm Maven Webapp</name>
    <!-- FIXME change it to the project's website -->
    <url>http://www.example.com</url>

    <properties>
        <project.build.sourceEncoding>UTF-8</project.build.sourceEncoding>
        <maven.compiler.source>1.7</maven.compiler.source>
        <maven.compiler.target>1.7</maven.compiler.target>
        <maven.compiler.plugin.version>3.7.0</maven.compiler.plugin.version>
        <!--添加jar包依赖-->

        <!--文件上传-->
        <commons-fileupload.version>1.3.3</commons-fileupload.version>

        <!--1.spring 5.0.2.RELEASE相关-->
        <spring.version>5.0.2.RELEASE</spring.version>
        <!--2.mybatis相关-->
        <mybatis.version>3.4.5</mybatis.version>
        <!--mysql-->
        <mysql.version>5.1.44</mysql.version>
        <!--pagehelper分页jar依赖-->
        <pagehelper.version>5.1.2</pagehelper.version>
        <!--mybatis与spring集成jar依赖-->
        <mybatis.spring.version>1.3.1</mybatis.spring.version>
        <!--3.dbcp2连接池相关 druid-->
        <commons.dbcp2.version>2.1.1</commons.dbcp2.version>
        <commons.pool2.version>2.4.3</commons.pool2.version>
        <!--4.log日志相关-->
        <log4j2.version>2.9.1</log4j2.version>
        <log4j2.disruptor.version>3.2.0</log4j2.disruptor.version>
        <slf4j.version>1.7.13</slf4j.version>

        <!-- redis与spring的整合依赖 -->
        <redis.version>2.9.0</redis.version>
        <redis.spring.version>1.7.1.RELEASE</redis.spring.version>

        <!-- jackson -->
        <jackson.version>2.9.3</jackson.version>

        <!--5.其他-->
        <junit.version>4.12</junit.version>
        <servlet.version>4.0.0</servlet.version>
        <lombok.version>1.18.2</lombok.version>

        <tomcat-jsp-api.version>8.0.47</tomcat-jsp-api.version>
    </properties>

    <dependencies>
        <dependency>
            <groupId>org.apache.shiro</groupId>
            <artifactId>shiro-core</artifactId>
            <version>1.3.2</version>
        </dependency>

        <dependency>
            <groupId>org.apache.shiro</groupId>
            <artifactId>shiro-web</artifactId>
            <version>1.3.2</version>
        </dependency>

        <dependency>
            <groupId>org.apache.shiro</groupId>
            <artifactId>shiro-spring</artifactId>
            <version>1.3.2</version>
        </dependency>

        <!--引入JWT依赖,由于是基于Java，所以需要的是java-jwt -->
        <dependency>
            <groupId>io.jsonwebtoken</groupId>
            <artifactId>jjwt</artifactId>
            <version>0.9.1</version>
        </dependency>
        <dependency>
            <groupId>com.auth0</groupId>
            <artifactId>java-jwt</artifactId>
            <version>3.4.0</version>
        </dependency>
        <!--文件上传-->
        <dependency>
            <groupId>commons-fileupload</groupId>
            <artifactId>commons-fileupload</artifactId>
            <version>1.3.3</version>
        </dependency>
        <!--1.spring相关-->
        <dependency>
            <groupId>org.springframework</groupId>
            <artifactId>spring-core</artifactId>
            <version>${spring.version}</version>
        </dependency>
        <dependency>
            <groupId>org.springframework</groupId>
            <artifactId>spring-beans</artifactId>
            <version>${spring.version}</version>
        </dependency>

        <!--这是引入springframework 这个项目中的web模块-->
        <dependency>
            <groupId>org.springframework</groupId>
            <artifactId>spring-webmvc</artifactId>
            <version>${spring.version}</version>
        </dependency>


        <dependency>
            <groupId>jstl</groupId>
            <artifactId>jstl</artifactId>
            <version>1.2</version>
        </dependency>
        <dependency>
            <groupId>taglibs</groupId>
            <artifactId>standard</artifactId>
            <version>1.1.2</version>
        </dependency>

        <dependency>
            <groupId>org.springframework</groupId>
            <artifactId>spring-orm</artifactId>
            <version>${spring.version}</version>
        </dependency>
        <dependency>
            <groupId>org.springframework</groupId>
            <artifactId>spring-tx</artifactId>