Redis解决跨域存取Session问题

前言

vue3+SpringBoot做项目时,由于vue前端项目是在8080端口运行,而后端项目是在8081端口运行,前端通过跨域发送axios请求发送给后端的场景下,我以前在前后端不分离的情况下做项目登录功能做过滤器时,直接用Session就可以将用户登录的信息存到session中,过滤器只需要查看在拦截路径时对session做获取,获取成功则说明可以用户是登录成功的。也不会出现session存不进去的情况。

这次的前后端分离这个问题就出现了,下面就来解决这个问题。

一、遇到的情况

在登录controller中的login方法里,登录成功后将值存到session中

request.getSession().setAttribute("administrator",admin.getId());

但在页面中打开f12,点开应用会发现没有存储session的信息。

session中没有存入的值

这就是跨域带来的问题,后端服务器是8081端口,存session就存不到前端8080端口的session中。

二、解决问题

既然已经知道了问题,在我发现这个问题时(因为我Debug调试跟踪后端代码后发现确实执行了存session的动作,所以才会知道是跨域导致的问题)。我一开始就上网找材料,查找解决办法。搜到的大部分都是在分布式的情况下共享session问题。不太符合解决我当前遇到的问题。

查了一段时间资料后,我想到了Redis,想到了:存session、取session的过程,那能用session去存取数值,为什么不用Redis呢?这让我“如鱼得水“,在学习完Redis后还没想到Redis可以用来代替session干活,哈哈。所以我将用Redis解决问题的步骤代码分享给大家,学过Redis的应该是属于简单易懂的。

2.1 配置yml文件

在yml文件中配置Redis的基本信息。

2.2 启动Redis

将Redis服务器打开

2.3 代码编写

第一步:注入RedisTemplate

@Autowired
private RedisTemplate redisTemplate;

第二步:将登录成功的值存到Redis中

//6.登录成功,将员工id存入Redis并返回登录成功结果
redisTemplate.opsForValue().set("administrator",admin.getId());

第三步:在过滤器拦截路径后取Redis中的值。当然了,别忘了在过滤器类注入RedisTemplate。

//4-1.判断登录状态,如果已登录,则直接放行
 if(redisTemplate.opsForValue().get("administrator") != null){
 /**
 * 设置将id存起来
 * */
 Long adminId = (Long) redisTemplate.opsForValue().get("administrator");
 BaseContext.setCurrentId(adminId);
 //放行
 filterChain.doFilter(request,response);
 return;
 }

三、效果演示

先打开Redis桌面管理查看值,在没有登录时是没有值的。如下图:

启动项目后我们登录一下,查看Redis中是否有值。
登录成功,在拦截器开的情况下也会发送axios请求查询数据库数据。所以已经证明了。

但我们还是看下存到Redis的值,如下图:

可以看到,已经实现了这个功能。使用Redis代替了session起到的作用。所以拦截器自然也知道你是登录过的,才会让行让方法能够查询数据库将数据显示到页面去。

总结

到这里使用Redis就解决了Session存取存在的跨域问题,也不叫解决session的跨域问题吧,只是换了个思路解决了同样的问题而已。我相信session也是可以解决这个问题的,应该是需要配置一些前端的代码等。我也不太清楚,但能用我们学习过的知识解决问题那不是更好吗!Redis用起来也很简单,也解决了当前的问题,我觉的是一个很不错的方法。

作者:心态还需努力呀原文地址:https://blog.csdn.net/weixin_52258054/article/details/130083775

%s 个评论

要回复文章请先登录注册