通过一个登录模块掌握Cookie Session Redis三把工具刀

最新推荐文章于 2023-06-24 22:15:10 发布
最新推荐文章于 2023-06-24 22:15:10 发布
阅读量191 收藏
点赞数
分类专栏： 登录模块 后端 前端 文章标签： vue session cookie redis springmvc
版权声明：本文为博主原创文章，遵循 CC 4.0 BY 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/t_t2_3/article/details/114219222
版权
后端 同时被 3 个专栏收录
45 篇文章 7 订阅
订阅专栏
前端
25 篇文章 0 订阅
订阅专栏
登录模块
1 篇文章 0 订阅
订阅专栏

前言

对于前后端分离的项目,Cookie和Session是前后端通信的两种重要手段,我们今天来看看两者的区别,以及提供一个引出Redis的使用案例

一 Cookie

它的流程是这样的👇
在这里插入图片描述
拿登录模块举个例子

ursename,password
查询
返回一个对象
生成一个字符串塞给该对象
前端
服务器
数据库

看代码👇
前端发请求

this.$http
            .post("/user/login", this.$qs.stringify({
				usernmae:'张三'
				password:'abc'
			}))
            .then((response) => {
              if (response.data.code == 200) {
                console.log(response.data.data)
                this.$message({
                  message: `${response.data.data.uname}欢迎回来`,
                  type: "success",
                });
                sessionStorage.setItem("token", response.data.data.token);//把回来的token set进sessionStorage中等着下次使用
                this.$router.push("/index");
              }
});

后台

@RequestMapping(value = "/login",method = RequestMethod.POST)
    @ResponseBody
    public ETResponse queryUserByUsernameAndPwd(String username,String password){
String token = UUID.randomUUID().toString().replace("-", "");
     Users u = service.queryUserByUsernameAndPwd(username, password);
     if (u != null && uname.equals(u.getUname())) {
          u.setToken(token);
          return sr.setResponse(u,"200");//这里回去了Cookie
     } 
     return sr.setResponse("", "445");//用户名或密码错误 
}

再下一次前端发送请求就可以把sessionStorage中的token发给后台,后台根据这个字符串去查询某个唯一 的用户,并且获得该用户的权限,那你会说,刚刚我们后台生成"token"不是直接给前台了吗?我们也没有存下来了,怎么查?
没错,所以说这时候我们就要用到一个大件 –Redis

二 Redis的使用

那么前后端通信的流程就变成这样了👇
在这里插入图片描述
再加上第二次交互👇
在这里插入图片描述
感觉稍微有亿点点乱,不过感觉两张图结合起来看还算可以,好吧 我们还是看代码吧👇
这时候前端登录完毕,需要根据该用户的身份展示对应的菜单,那么这就是第二次交互了,那么需要先改改第一次交互的代码,需要添加商向Redis中存token=用户对象这一段代码

@RequestMapping(value = "/login",method = RequestMethod.POST)
    @ResponseBody
    public ETResponse queryUserByUsernameAndPwd(String username,String password){
String token = UUID.randomUUID().toString().replace("-", "");
Users u = service.queryUserByUsernameAndPwd(username, password);
if (u != null && uname.equals(u.getUname())) {
    try {
        RedisUtil ru = RedisUtil.getRedisUtil();//打开Redis
        u.setToken(token);//组装对象
        ru.setex(token, 1800, JSONObject.toJSONString(u));//存进Redis中
    } catch (Exception e) {
        e.printStackTrace();
        return sr.setResponse("", "446");//Redis数据库异常
    }
} else {
    return sr.setResponse("", "445");//用户名或密码错误
}
return sr.setResponse(u,"200");//登陆成功,这里回去了Cookie
}

ok接着就是 前端第二次交互 发送token
直接从SessionStrorage中获取token 发送

this.$http
      .post("/user/queryMenuByUserId", this.$qs.stringify({token:sessionStorage.getItem('token')}))
      .then((response) => {
        this.menuList =response.data.data
      });

后端接 :Controller中的方法:流程就是 拿token 去Redis找对象 拿到对象去数据库里找结果集,至于这个动态菜单功能的实现 前面我有讲过,不太清楚的朋友可以直接跳转过去看看根据用户权限的不同实现动态菜单详解

@RequestMapping("/queryMenuByUserId")
    @ResponseBody
    public ETResponse queryMenuByUserID(String token){
        RedisUtil ru =RedisUtil.getRedisUtil();//打开Redis工具 我资源里上传了
        String userInfo =ru.get(token);// 相当于是一个Map
        Users u =JSONObject.parseObject(userInfo,Users.class);
        List<Menus> menus =service.queryMenuByUserId(u.getId());
        List<Menus> tops =new ArrayList<>();
        for (Menus menu : menus) {
            if(menu.getPid()==-1){
                tops.add(menu);
            }
        }
        for (Menus top : tops) {
            SetNodes.setNodes(top,menus);
        }
        return sr.setResponse(tops,"200");
    }

ok这样一来,我们Redis的实例就说完了

三 Session

那么Session又是干什么的呢?
Session跟Cookie差不多,也是一个用来前后端通信的信件,那么我们看看什么是Session它又和Cookie有什么区别呢?
这样我们给刚才的登录模块 加一个验证码的功能,而最终前端的效果就是这样

那么这个验证码的图片加载,肯定是从后台过来的,也就是说真正的第一次前后台交互是在登录这个组件的Created()钩子中完成的,那么所谓的Session对向就是在这个节点发送给了后台,
前端

   Code() {
      this.$http
        .get("/user/checkCode", { responseType: "blob" })
        .then((response) => {
          this.CheckCodeUrl = window.URL.createObjectURL(response.data);
          this.form.sessionid = response.headers.sessionid;
        });
    },

 created() {
    this.Code();
  },

没什么毛病吧,空参请求拿后端生成的图片
那么Controller

@RequestMapping("/checkCode")
    public void checkCode(HttpServletRequest req, HttpServletResponse resp) throws IOException {
        int WIDTH = 120;//生成图片的宽度
        int HEIGHT = 30;
        // TODO Auto-generated method stub
        String createTypeFlag = req.getParameter("createTypeFlag");//接收客户端传递的createTypeFlag标识
        //在内存中创建一张图片
        BufferedImage bi = new BufferedImage(WIDTH,HEIGHT,BufferedImage.TYPE_3BYTE_BGR);
        //得到图片
        Graphics g = bi.getGraphics();
        //设置图片的背景色
        setBackGround(g);
        //设置图片的边框
        setBorder(g);
        //在图片上画干扰线
        drawRandomLine(g);
        //在图片上放上随机字符
        String randomString = this.drawRandomNum((Graphics2D)g, createTypeFlag);

        //将随机数存在session中
        HttpSession hs =req.getSession();//重点在这里 从Request中获得session对象
        hs.setAttribute("checkcode", randomString);

        //设置响应头通知浏览器以图片的形式打开
        resp.setContentType("image/jpeg");

        //设置响应头控制浏览器不要缓存
        resp.setDateHeader("expries", -1);
        resp.setHeader("Cache-Control", "no-cache");
        resp.setHeader("Pragma", "no-cache");
        resp.setHeader("sessionid",hs.getId());//而session对象的id赛给响应头给了前端
        //将图片传给浏览器
        ImageIO.write(bi, "jpg", resp.getOutputStream());
    }

在这里插入图片描述
而第二次交互 就在登录了看看又添上了Session校验之后,我们的代码变成什么样子了
前端登录的方法,最终版

    submitForm(formName) {
      // 为表单绑定验证功能
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.$http
            .post("/user/login", this.$qs.stringify(this.form))
            .then((response) => {
              if (response.data.code == 200) {
                console.log(response.data.data)
                this.$message({
                  message: `${response.data.data.uname}欢迎回来`,
                  type: "success",
                });
                sessionStorage.setItem("token", response.data.data.token);
                this.$router.push("/index");
              } else if (response.data.code == 447) {
                this.$message({
                  message: "验证码错误",
                  type: "error",
                });
              } else if (response.data.code == 445) {
                this.$message({
                  message: "用户名或密码错误",
                  type: "error",
                });
              }else{
                 this.$message({
                  message: "Redis数据库异常",
                  type: "error",
                });
              }
            });
        } else {
          this.dialogVisible = true;
          return false;
        }
      });
    }

后端Cookie+Redis+Session的最终版
Controller

@RequestMapping(value = "/login",method = RequestMethod.POST)
    @ResponseBody
    public ETResponse queryUserByUsernameAndPwd(@RequestParam("username") String uname,@RequestParam("password") String pwd,String checkCode,@RequestParam("sessionid") String sessionId){
        HttpSession hs =UserControllerListener.getSessionById(sessionId);
        String str =hs.getAttribute("checkcode")+"";//查看Session中的验证码
        if(str.equalsIgnoreCase(checkCode)) {
            String token = UUID.randomUUID().toString().replace("-", "");
            Users u = service.queryUserByUsernameAndPwd(uname, pwd);
            if (u != null && uname.equals(u.getUname())) {
                try {
                    RedisUtil ru = RedisUtil.getRedisUtil();
                    u.setToken(token);
                    ru.setex(token, 1800, JSONObject.toJSONString(u));
                } catch (Exception e) {
                    e.printStackTrace();
                    return sr.setResponse("", "446");//Redis数据库异常
                }
            } else {
                return sr.setResponse("", "445");//用户名或密码错误
            }
            return sr.setResponse(u,"200");//这里回去了Cookie
        }else {
            return sr.setResponse("","447");//验证码不对
        }
    }

而由于跨域的问题,我们request每次携带的Session都是新的,如果我们不处理那么我们第一次set进去的参数永远找不到,所以我们需要通过某种手段来存一下第一次交互的时候Session对象–ControllerListener

@WebListener
public class UserControllerListener implements HttpSessionListener {
    private static final Map<String, HttpSession> map = new ConcurrentHashMap<>();
    @Override
    public void sessionCreated(HttpSessionEvent httpSessionEvent) {
           HttpSession hs = httpSessionEvent.getSession();
           map.put(hs.getId(),hs);//在Session创建的时候自动监听 put进入Map集合
    }

    @Override
    public void sessionDestroyed(HttpSessionEvent httpSessionEvent) {

    }
    public static HttpSession getSessionById(String sessionid){
        return map.get(sessionid);//通过Sessionid找到第一次的Session 这样就能拿到里面的参数,看看和这次传入的参数是否是一致的判断输入是否有误
    }
}

流程:
在这里插入图片描述

总结

今天用一个登录模块把Cookie Session Redis三者都用起来了,流程都比较复杂一点,说的比较杂乱纯原创,喜欢的话给个赞吧

商朝
关注
专栏目录
三个常用Redis视图化工具.zip
11-24
本压缩包文件提供了关于“三个常用Redis视图化工具”的相关信息，让我们详细了解一下这三个工具及其功能。 1. RedisInsight RedisInsight是Redis Labs开发的一款强大的Redis监控工具，它提供了丰富的图表和实时数据...
ET服务器框架学习笔记（十二）
kylinok的博客
11-21 916
ET服务器框架学习笔记（十二） 文章目录ET服务器框架学习笔记（十二）前言一、NetInnerComponent与NetOuterComponent二、两者的区别1.NetOuterComponent1.OuterMessageDispatcher的DispatchAsync方法2.NetInnerComponent1.OuterMessageDispatcher的Dispatch总结 前言 前篇记录了抽象类NetworkComponent，本篇介绍ET真正加载使用的类：NetInnerComponen
ET源码学习（三）：Message系列IMHandler和MessageDispatcher
Ha啤酒来大杯的博客
07-01 644
先看接口 AMHandler继承自IMHandler拥有MessageHandler属性标签是个抽象方法 下面是AMRpcHandler这个相比AMHandler方法，可以发现原来的Message变成了Request和Response 并且需要一个回调 protected abstract ETTask Run(Session session, Request request, Response response, Action reply); MessageDispatcher 有一个操作码和Lis
（四）Vue项目——轻社区：实现用户登录功能
最新发布
m0_71824048的博客
06-24 789
Vue项目“轻社区”，实现用户登录注册+用户中心+邮件激活+分类管理+点赞+回复操作等功能。打造微一站式互动轻社区。
再走NODE路: (篇四)原生node实现 cookie + session + redis 登录验证
qq_44746132的博客
12-07 836
关于登录这块应该是每一个系统中都必须的一个环节之一，虽然现在的第三方登录确实很流行，也很安全，但别人的始终是别人的。所以我们今天就来说一下如何使用原生的node实现客户端登录验证 关于cookie(仅仅是我的理解): cookie是存储在浏览器的一段字符串，最长限制5kB，它的一些特性如下: 跨域不共享: 及在不同的请求域下的cookie的值是不同的 格式为键值的形式: 即 “k1=a1; ...
cookie+redis实现单点登录并保持session有效期
makersy的博客
04-20 3196
该方案的实现场景是多个tomcat分布式，需要session共享，即用户登录请求发给了一个tomcat，要求所有的tomcat都有该用户登录的token、session，下次请求转发到其他的tomcat时，仍然认为该用户是登陆状态。 具体实现需要配置nginx，进行vitual host的配置。 ...
基于SpringBoot+Redis的Session共享与单点登录详解
08-25
主要介绍了基于SpringBoot+Redis的Session共享与单点登录,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
基于C# 写一个 Redis 数据同步小工具
08-25
在这个场景中，我们讨论的是一个基于 C# 编写的 Redis 数据同步小工具，它可以用来将一个 Redis 实例的数据迁移到另一个实例，这对于在不同的环境或扩展 Redis 集群时非常有用。 Redis 是一个快速、灵活的键值存储...
SpringBoot+MyBatis+SpringSession+Redis实现session共享及单点登录
03-02
SpringBoot+MyBatis+SpringSession+Redis实现session共享及单点登录开发实例
tomcat+redis session用到三个jar包.rar
05-16
总结起来，"tomcat+redis session用到三个jar包.rar"提供了一套实现`Tomcat`、`Redis`和`Nginx`间Session共享的解决方案。通过将Session数据存储在Redis中，可以实现跨服务器的共享，并借助Nginx进行负载均衡。使用...
redis缓存和cookie实现Session共享
hchhan的博客
10-30 7393
分布式项目 单点登录（SSO - Single Sign On）
用Redis实现Session功能
weixin_30507481的博客
06-23 421
0.什么是Redis Redis是一个开源的使用ANSI C语言编写、支持网络、可基于内存亦可持久化的日志型、Key-Value数据库，并提供多种语言的API ---维基百科 1.与其他用户状态保存方案比较 一般开发中用户状态使用session或者cookie，两种方式各种利弊。 Session:在InProc模式下容易丢失，并且引起并发问题。如果使用SQLServer或者...
Cookie工具类
zhang_xue_bing的博客
12-27 215
package com.mmall.util; import lombok.extern.slf4j.Slf4j; import org.apache.commons.lang.StringUtils; import javax.servlet.http.Cookie; import javax.servlet.http.HttpServletRequest; import javax.ser
redis存储token实现登录模块(SpringBoot)
小菜鸡叽叽叽
08-02 5634
redis存储token实现登录模块(SpringBoot)
redis实现单点登录系统
热门推荐
成都往右的博客
08-31 1万+
SSO英文全称Single Sign On，单点登录。SSO是在多个应用系统中，用户只需要登录一次就可以访问所有相互信任的应用系统。它包括可以将这次主要的登录映射到其他应用中用于同一个用户的登录的机制。它是目前比较流行的企业业务整合的解决方案之一。
Cookie利用神器：CookieHacker
weixin_33898233的博客
10-21 440
转自evilcos的博客 看到那么多苦逼的跨站师在问Cookie利用工具，不忍心，还是把自己写的Chrome扩展开源出来吧，功能极简，仿造《我的渗透利器》里提到的Original Cookie Injector for Greasemonkey。 效果 在Chrome下按alt+c快捷键打开如下图： 然后把你盗来的Cookies，直接贴进文本框里，上面的域名输入框会自动取你当前所在的页...
redis应用分析---登录、收藏模块
do what you like && brave
05-10 940
redis设置定时器（密码或者频繁接口访问）//新增逻辑，用radis来限制接口被重复访问。    //声明一个rediskey特殊标志;    String redisKey = "ADD_COLLECT" +user_id ;//设置用户的标志    int count =Integer.valueOf((String) redis.getValue("redisKey"));    //判断...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

商朝

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

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

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

打赏作者

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

抵扣说明：

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

余额充值