解决前后端分离开发中登录验证码 跨域和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>
		
  1. 获取验证码

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();
}
  1. 点击登录验证
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 =""
  • 1
    点赞
  • 3
    收藏
  • 打赏
    打赏
  • 2
    评论

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

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
©️2022 CSDN 皮肤主题:大白 设计师:CSDN官方博客 返回首页
评论 2

打赏作者

一只快乐的蓝胖纸

你的鼓励将是我创作的最大动力

¥2 ¥4 ¥6 ¥10 ¥20
输入1-500的整数
余额支付 (余额:-- )
扫码支付
扫码支付:¥2
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值