Redis解决跨域存取Session问题

前言

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

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

一、遇到的情况

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

但在页面中打开f12，点开应用会发现没有存储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

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

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

三、效果演示

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

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

但我们还是看下存到Redis的值，如下图：

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

总结

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