专栏首页技术进阶之路前后端分离中使用 Session 域传输对象

前后端分离中使用 Session 域传输对象

前提

前端使用 Vue,后端使用 SpringBoot 框架,使用 Session 传值后端获取不到。

这里使用 Session 域来存储验证码,拿到后台去比对,验证是否正确。

前端代码如下,只是发送一个请求:

/**
 * 加载验证码
 */
loadImageCode() {
  let _this = this;
  _this.imageCodeToken = Tool.uuid(8);
  $('#image-code').attr('src', process.env.VUE_APP_SERVER + '/system/admin/kaptcha/image-code/' + _this.imageCodeToken);
},

login() {
  let _this = this;
  // 如果密码是从缓存带出来的: 则不需要重新加密
  let md5 = hex_md5(_this.user.password);
  let rememberUser = LocalStorage.get(LOCAL_KEY_REMEMBER_USER) || {};
  if (md5 !== rememberUser.md5) {
    _this.user.password = hex_md5(_this.user.password + KEY);
  }
  _this.user.imageCodeToken = _this.imageCodeToken;
  Loading.show();
  _this.$ajax.post(process.env.VUE_APP_SERVER + '/system/admin/user/login', _this.user).then(response => {
    Loading.hide();
    let resp = response.data;
    if (resp.success) {
      // resp.content: {id: "wAtUSitS", loginName: "test", name: "test"}
      let cont = resp.content;
      Toast.success('登陆成功');
      ····

后端是这样的:

@GetMapping("/image-code/{imageCodeToken}")
public void imageCode(@PathVariable(value = "imageCodeToken") String imageCodeToken, HttpServletRequest request, HttpServletResponse httpServletResponse) throws Exception{
    ByteArrayOutputStream jpegOutputStream = new ByteArrayOutputStream();
    try {
        // 生成验证码字符串
        String createText = defaultKaptcha.createText();
        request.getSession().setAttribute(imageCodeToken, createText);
        ····
/**
 * 登陆
 *
 * @param userDto userDto
 * @return 返回响应
 */
@PostMapping("/login")
public ResponseDto<LoginUserDto> login(@RequestBody UserDto userDto, HttpServletRequest request) {
    LOG.info("用户登陆开始");
    // MD5 加密
    userDto.setPassword(DigestUtils.md5DigestAsHex(userDto.getPassword().getBytes()));
    ResponseDto<LoginUserDto> responseDto = new ResponseDto<>();
    
    // 根据验证码 token 去获取缓存中的验证码 判断和用户输入的验证码是否一致
    String imageCode = (String) request.getSession().getAttribute(userDto.getImageCodeToken());
    if (StringUtils.isEmpty(imageCode)) {
        responseDto.setSuccess(false);
        responseDto.setMessage("验证码已过期");
        LOG.info("用户登陆失败: 验证码已过期");
        return responseDto;
    }
    if (!imageCode.toLowerCase().equals(userDto.getImageCode().toLowerCase())) {
        responseDto.setSuccess(false);
        responseDto.setMessage("验证码不对");
        LOG.info("用户登录失败: 验证码不对");
        return responseDto;
    } else {
        // 验证码通过后 移除验证码
        request.getSession().removeAttribute(userDto.getImageCodeToken());
    }
    ····

解决

在 Vue 的 main.js 中添加这一句:

// 解决每次 ajax 请求, 对应的 sessionId 不一致的问题
axios.defaults.withCredentials = true;

同时设置一下跨域,这里给出一种方法,其他方法请看这篇文章 https://blog.csdn.net/weixin_43941364/article/details/109004806

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • JavaScript学习笔记(一)

    wdm,这个寒假越过越长… 寒假在家学习JavaScript的相关知识,写博客作为笔记 我是以清华大学出版社的《JavaScript从入门到项目实践》作为学...

    wsuo
  • 使用 Django + Vue.js 开发个人博客网站(完整版附源码)—— Python-课程设计-期末项目

    本文主要讲解 Python 后端部分,由于仅仅用到了 vue 作为 js 框架并非前后端分离项目,故前端不单独介绍。

    wsuo
  • LeetCode 刷题技巧与学习方法

    根据一本书中所讲的:《异类:不一样的成功启示录》,我们学习一项技术或者精通一个领域一定要经过 3 个阶段。

    wsuo
  • JavaScript 常用功能总结

    小编吐血整理加上翻译,太辛苦了~求赞! 本文主要总结了JavaScript 常用功能总结,如一些常用的JS 对象,基本数据结构,功能函数等,还有一些常用的设计模...

    葡萄城控件
  • C#生成图形验证码

    我弄的这个图形验证码是通过伪随机验证码+label控件+背景图来实现的,我觉得我这个图形验证码写得比较low,用代码实现起来也特别简单。

    喜欢ctrl的cxk
  • slice、splice、split用法与区别

    1、slice中存在2个参数,slice(start,end),start表示数组索引,end是数字位置,若只存在一个参数则显示参数位置到最后

    小雯子打豆豆
  • js重修课[四]:函数

    函数有两种定义方法:定义表达式如var f = function(){};和声明语句如function f(){}。须知在变量提前这一现象中,声明语句可被提前,...

    星回
  • Spiral 详细上手指南之请求和响应

    在上一篇《Spiral 详细上手指南之路由规则》中,相信大家对于 Spiral 框架中的路由配置已经完全掌握了。不过在文章结束的时候,我们创建的控制器针对各种请...

    小李刀刀
  • Spring是如何解决循环依赖的

    在面试的时候这两年有一个非常高频的关于spring的问题,那就是spring是如何解决循环依赖的。这个问题听着就是轻描淡写的一句话,其实考察的内容还是非常多的,...

    纪莫
  • 格力不灭的手机梦

    日前,格力5G手机获工信部入网许可,并曝光手机基本参数及外观,这意味着格力5G手机就要面世了。这让沉寂许久的格力手机再次引发热议,有关注者更有质疑者。

    刘旷

扫码关注云+社区

领取腾讯云代金券