[JavaScript知识库]解决前后端分离开发中登录验证码 跨域和session不一致问题

一. 环境说明

使用工具：HBuilderX
使用语言：H5、jQuery、CSS
开发模式：前后端分离

二. 功能说明

前后端分离开发模式下，实现网页的验证登录

• 后端通过工具方法生成随机字符串，前端根据接口获取验证码二进制编码，转换为验证码图片
• 根据登录接口，进行登录验证
• 登录成功获取用户信息

三. 可能会出现的问题点

• 问题点1：获取验证码的时JSESSIONID和登录请求的JSESSIONID不一致
• 问题点2：跨域问题
• 问题点3：后端返回的是验证码图片的字节流，怎么显示在页面上
• 问题点4：验证码点击切换没有效果

四.解决方案

• 问题点1的解决方案：

  • 后端在返回验证码的接口的响应头添加一个session_key
  • 前端获取到响应头的session_key( 获取方式：xhr.getResponseHeader(“session_key”))
  • 在登录验证接口放在请求头返回给后端（实现方式： “headers”: { “session_key”: “验证码接口接收到的session_key”}）
  • 后端获取到请求头的session_key,这样就能保证获取的session_key一致性

• 问题点2的解决方案：

  • 前端设置xhrFields: { withCredentials: true}
  • 后端进行拦截

• 问题点3的解决方案：通过blob的处理，生成一个URL，作为图片的src属性的值，显示验证码图片

• 问题点4的解决方案：加上时间戳，可以实现点击图片换一张的效果

五.实现案例

1. 页面布局

<div class="content">
			<img src="../img/login_bg.png" style="width: 100%;height:100%" />
			<div class="cont">
				<div class="title">
					学生登录入口
				</div>
				<div class="contBanner">
					<div class="contRow">
						<input placeholder="用户名" type="text" id="userName" value="" autocomplete="off" />
					</div>
					<div class="contRow">
						<input placeholder="密码" type="password" id="password" value="" autocomplete="off" />
					</div>
					<div class="contRow1">
						<div class="vaildCode">
							<input placeholder="验证码" type="text" id="code" value="" autocomplete="off" />
						</div>
						<div ondblclick="changeCode()" class="code">
							<img src="http://5221263lk8.zicp.vip/user/front/kaptcha?" id="codeImg" />
						</div>
						<div onclick="changeCode()" class="change"> 换一张 </div>
					</div>
					<div class="login" onclick="login()">登录</div>
					<div style="display:flex;justify-content: flex-end;">
						<div class="forget" onclick="forget()">忘记密码  |</div>
						<div class="register" onclick="goRegister()"> 免费注册</div>
					</div>
				</div>
			</div>
		</div>
		

2. 获取验证码

function changeCode() {
	var windowUrl = window.URL || window.webkitURL; //处理浏览器兼容性
	var xhr = new XMLHttpRequest();
	var url = 'getkaptcha?' + Date.now()
	xhr.open("GET", url, true);
	xhr.responseType = "blob";
	xhr.withCredentials = true;
	xhr.onload = function() {
		if (this.status == 200) {
			var blob = this.response;
			//获取响应头的session_key
			session_key = xhr.getResponseHeader("session_key");
			console.log(session_key)
			//绑定验证码
			$("#codeImg").attr("src", windowUrl.createObjectURL(blob));
		}
	}
	xhr.send();
}

3. 点击登录验证

function login() {
	let userName = $("#userName").val();
	let password = $("#password").val();
	let code = $("#code").val();
	if (userName == "" || password == "" || code == "") {
		$("#modelCont").html("数据不能为空!!!")
		$("#myModal").modal('show')
	}
	var settings = {
		"url": "login",
		"method": "POST",
		"headers": {
			"Content-Type": "application/json",
			"session_key": session_key
		},
		xhrFields: {
			withCredentials: true
		},
		crossDomain: true,
		"data": JSON.stringify({
			"username": userName,
			"password": password,
			"captcha": code
		}),
	};
	$.ajax(settings).done(function(response) {
		if (response.success == false) {
		  $("#modelCont").html(response.message)
		  $("#myModal").modal('show')
		} else {
			console.log( response.data.data.access_token)
			getUserInfo(response.data.data.access_token)
	});
}

4.获取用户信息

function getUserInfo(token){
	var set = {
		"url": "getUserInfo",
		"method": "POST",
		"timeout": 0,
		"headers": {
			"Content-Type": "application/json",
			"Authorization": token
		},
		xhrFields: {
			//前端的防止跨域
			withCredentials: true
		},
	};
	$.ajax(set).done(function(res) {
		console.log(res)
		//设置浏览器缓存，方便其他页面调用
		localStorage.setItem('userInfo', JSON.stringify(res.data.data.userInfo));
		//登录成功跳转到首页
		window.location.href = "../home.html"
	})
}

5.页面加载事件

 
	$(function() {
		changeCode()
	})

6.全局参数

let kaptcha_key =""