当前位置: 首页 > news >正文

redis+token实现登录校验,前后端分离,及解跨域问题的4种方法

 

目录

一、使用自定义filter实现跨域

1、客户端向服务端发送请求

2、服务端做登录验证了,并生成登路用户对应的token,保存到redis

3、响应(报错)-----跨域问题

4、解决跨域问题--------服务器端添加过滤器,设置请求头

5、重新登录正确响应

6、客户端登redis录后访问页面,需要经过拦截器验证登录状态

7、编写拦截器

二、在任意配置类,返回一个 新的 CorsFIlter Bean 

三、使用注解 (局部跨域)

四、手动设置响应头(局部跨域)


前提:前后端分离

一、使用自定义filter实现跨域

1、客户端向服务端发送请求

使用ajax实现登录

<script>function login(){var userCode = $("#userCode").val();var userPassword = $("#userPassword").val();$.ajax({url:"http://localhost:9000/login.do",type:"post",data: "userCode="+userCode+"&userPassword="+userPassword,dataType: "text",success: function (result){if(result!=null && result!=""){alert("登录成功")localStorage.token=resultwindow.location.href="view/frame.html";}else {alert("登录失败")}}})}</script>

2、服务端做登录验证了,并生成登路用户对应的token,保存到redis

@RequestMapping ("/login.do")public String login(String userCode, String userPassword, Model model){User user = userService.login(userCode,userPassword);if(user!=null){//使用UUID生成tokenString token = UUID.randomUUID().toString().replace("-","");//把token保存到redis中,时效1小时RedisTools.setEx(token,user.getUserName(),1,TimeUnit.HOURS);System.out.println(token);return token;}return "";}

3、响应(报错)-----跨域问题

4、解决跨域问题--------服务器端添加过滤器,设置请求头

@Component
@WebFilter("/**")
public class MyCorsFilter implements Filter {@Overridepublic void doFilter(ServletRequest req, ServletResponse res, FilterChain chain) throws IOException, ServletException {//设置字符集编码HttpServletRequest request = (HttpServletRequest) req;request.setCharacterEncoding("UTF-8");HttpServletResponse response = (HttpServletResponse) res;response.setCharacterEncoding("UTF-8");//"*":允许任何请求源访问,实际生产环境按公司要求response.setHeader("Access-Control-Allow-Origin", "*");//设置请求方式response.setHeader("Access-Control-Allow-Methods", "POST, GET, OPTIONS, DELETE");//最大时间response.setHeader("Access-Control-Max-Age", "3600");//response.setHeader("Access-Control-Allow-Headers", "x-requested-with");//添加自定义的请求头信息,"*"任何自定义请求头信息response.setHeader("Access-Control-Allow-Headers", "*");System.out.println("*********************************过滤器被使用**************************");//放行chain.doFilter(req, res);}
}

5、重新登录正确响应

6、客户端登redis录后访问页面,需要经过拦截器验证登录状态

客户端登录发送请求时,将token放入请求头中: headers:{"token":localStorage.token},

<script>function getUserList(){$.ajax({url: "http://localhost:9000/user/list.do",type:"get",headers:{"token":localStorage.token},dataType:"text",success:function (result){alert(result)}})}</script>

7、编写拦截器

从请求头中获取token的值,判断是否不为空,且token这个key存在于rdeis中,若存在则放行,反之拦截

public class SysIntercerptor implements HandlerInterceptor {@Overridepublic boolean preHandle(HttpServletRequest request, HttpServletResponse response, Object handler) throws Exception {String token = request.getHeader("token");if(StringUtil.isNullOrEmpty(token) || !RedisTools.hasKey(token)){System.out.println("登录已过期");PrintWriter out = response.getWriter();out.println("alert('登录已过期,请重新登录')");return false;}return true;}
}

前端

 后端

  

二、在任意配置类,返回一个 新的 CorsFIlter Bean 

@Configuration
public class CorsConfig  implements WebMvcConfigurer {//方式1@Overridepublic void addCorsMappings(CorsRegistry registry) {// 设置允许跨域的路由registry.addMapping("/**")//是否发送Cookie是否允许证书(cookies).allowCredentials(true)// 设置允许跨域请求的域名------------修改此行//放行哪些原始域//.allowedOrigins("*").allowedOriginPatterns("*")// 设置允许的方法.allowedMethods(new String[]{"GET", "POST", "PUT", "DELETE"}).allowedHeaders("*").exposedHeaders("*");}//方式2
//    @Override
//    public void addCorsMappings(CorsRegistry registry){
//        registry.addMapping("/*/**")
//                .allowedHeaders("*")
//                .allowedMethods("*")
//                .maxAge(1800)
//                .allowedOrigins("*");
//    }}
When allowCredentials is true, allowedOrigins cannot contain the special value "*" since that cannot be set on the "Access-Control-Allow-Origin" response header. To allow credentials to a set of origins, list them explicitly or consider using "allowedOriginPatterns" instead
当allowCredentials为true时,allowedOrigins不能包含特殊值“*”,因为不能在“Access Control Allow Origin”响应标头上设置该值。要允许一组来源的凭据,请显式列出它们或考虑改“allowedOriginPatterns”
 /*将红框中的.allowedOrigins("*")替换为.allowedOriginPatterns("*")即可*/

三、使用注解 (局部跨域)

@CrossOrigin(origins = "*")
 

四、手动设置响应头(局部跨域)

使用 HttpServletResponse 对象添加响应头(Access-Control-Allow-Origin)来授权原始域,这里 Origin的值也可以设置为 “*”,表示全部放行。

@RequestMapping("/index")
public String index(HttpServletResponse response) {response.addHeader("Access-Allow-Control-Origin","*");return "index";
}

相关文章:

redis+token实现登录校验,前后端分离,及解跨域问题的4种方法

目录 一、使用自定义filter实现跨域 1、客户端向服务端发送请求 2、服务端做登录验证了&#xff0c;并生成登路用户对应的token&#xff0c;保存到redis 3、响应&#xff08;报错&#xff09;-----跨域问题 4、解决跨域问题--------服务器端添加过滤器&#xff0c;设置请求…...

怎么解密MD5,常见的MD5解密方法,一看就会

MD5是一种被广泛使用的密码散列函数&#xff0c;曾在计算机安全领域使用很广泛&#xff0c;但是也因为它容易发生碰撞&#xff0c;而被人们认为不安全。那么&#xff0c;MD5应用场景有哪些&#xff0c;我们怎么解密MD5&#xff0c;本文将带大家了解MD5的相关知识&#xff0c;以…...

Vue3 目录结构

Vue3 目录结构 架构搭建 请确保你的电脑上成功安装 Node.js&#xff0c;本项目使用 Vite 构建工具&#xff0c;需要 Node.js 版本 > 12.0.0。 查看 Node.js 版本&#xff1a; node -v建议将 Node.js 升级到最新的稳定版本&#xff1a; 使用 nvm 安装最新稳定版 Node.js…...

Tsp_nurrec表空间满处理记录20230215

Tsp_nurrec表空间满处理记录20230215 一、问题: 问题:护理病历表空间不足。 二、解决过程:1.查询表空间使用效率 SELECT UPPER(F.TABLESPACE_NAME) “表空间名”, D.TOT_GROOTTE_MB "表空间大小(M)",D.TOT_GROOTTE_MB - F.TOTAL_BYTES "已使用空间(M)"…...

影像测量设备都有什么?有哪些影像仪器?

影像测量仪器是广泛应用于机械、电子、仪表的仪器。主要由机械主体、标尺系统、影像探测系统、驱动控制系统和测量软件等与高精密工作台结构组成的光电测量仪器。一般分为三大类&#xff1a;手动影像仪、自动影像仪和闪测影像仪。测量元素主要有&#xff1a;长度、宽度、高度、…...

Transformer:开启CV研究新时代

来源&#xff1a;投稿 作者&#xff1a;魔峥 编辑&#xff1a;学姐 起源回顾 有关Attention的论文早在上世纪九十年代就提出了。 在2012年后的深度学习时代&#xff0c;Attention再次被翻了出来&#xff0c;被用在自然语言处理任务&#xff0c;提高RNN模型的训练速度。但是由…...

Flink X Hologres构建企业级Streaming Warehouse

摘要&#xff1a;本文整理自阿里云资深技术专家&#xff0c;阿里云Hologres负责人姜伟华&#xff0c;在FFA实时湖仓专场的分享。点击查看>>本篇内容主要分为四个部分&#xff1a; 一、实时数仓分层的技术需求 二、阿里云一站式实时数仓Hologres介绍 三、Flink x Hologres…...

关于 mysql数据库插入中文变空白 的解决方法

若该文为原创文章&#xff0c;转载请注明原文出处 本文章博客地址&#xff1a;https://hpzwl.blog.csdn.net/article/details/129048030 红胖子网络科技的博文大全&#xff1a;开发技术集合&#xff08;包含Qt实用技术、树莓派、三维、OpenCV、OpenGL、ffmpeg、OSG、单片机、软…...

不可错过的SQL优化干货分享-sql优化、索引使用

本文是向大家介绍在sql调优的几个操作步骤&#xff0c;它能够在日常遇到慢sql时有分析优化思路&#xff0c;能够让开发者更好的了解sql执行的顺序和原理。一、前言在日常开发中&#xff0c;我们经常遇到一些数据库相关的问题&#xff0c;比方说&#xff1a;SQL已经走了索引了&a…...

vue3:直接修改reative的值,页面却不响应,这是什么情况?

目录 前言 错误示范&#xff1a; 解决办法&#xff1a; 1.使用ref 2.reative多套一层 3.使用Object.assign 前言&#xff1a; 今天看到有人在提问&#xff0c;问题是这样的&#xff0c;我修改了reative的值&#xff0c;数据居然失去了响应性&#xff0c;页面毫无变化&…...

从Vue2 到 Vue3,这些路由差异你需要掌握!

✨ 个人主页&#xff1a;山山而川~xyj ⚶ 作者简介&#xff1a;前端领域新星创作者&#xff0c;专注于前端各领域技术&#xff0c;共同学习共同进步&#xff0c;一起加油&#xff01; &#x1f386; 系列专栏&#xff1a; vue系列 &#x1f680; 学习格言&#xff1a;与其临渊羡…...

Maxwell简介、部署、原理和使用介绍

Maxwell简介、部署、原理和使用介绍 1.Maxwell概述简介 1-1.Maxwell简介 ​ Maxwell是由美国Zendesk公司开源&#xff0c;使用Java编写的MySQL变更数据抓取软件。他会实时监控Mysql数据库的数据变更操作&#xff08;包括insert、update、delete&#xff09;&#xff0c;并将变…...

20230215_数据库过程_渠道业务清算过程

----2023-0131-清算过程 zhyw.shc_drop_retable(upper(‘xc_qdcn_pgtx_qsqdtype_sja’),‘SHZC’); SQL_STRING:‘create table shzc.xc_qdcn_pgtx_qsqdtype_sja as select * from shzc.xc_qdcn_pgtx_qdtype a where a.in_time ( select max(a.in_time) from shzc.xc_qdcn_pg…...

webpack(高级)--性能优化-代码分离

webpack webpack性能优化 优化一&#xff1a;打包后的结果 上线时的性能优化 &#xff08;比如分包处理 减少包体积 CDN服务器&#xff09; 优化二&#xff1a;优化打包速度 开发或者构建优化打包速度 &#xff08;比如exclude cache-loader等&#xff09; 大多数情况下我们侧…...

借助docker, 使用verdaccio搭建npm私服

为何要搭建npm私服 搭建npm私服好处多多&#xff0c;网上随便一篇教程搜出来都罗列了诸多好处&#xff0c;譬如: 公司内部开发环境与外网隔离&#xff0c;内部开发的一些库高度隐私不便外传&#xff0c;内网搭建npm服务保证私密性同属内网&#xff0c;可以确保使用npm下载依赖…...

c/c++开发,无可避免的模板编程实践(篇二)

一、开发者需要对模板参数负责 1.1 为您模板参数提供匹配的操作 在进行模板设计时&#xff0c;函数模板或类模板一般只做模板参数&#xff08;typename T&#xff09;无关的操作为主&#xff0c;但是也不见得就不会关联模板参数自身的操作&#xff0c;尤其是在一些自定义的数据…...

【2023】【standard-products项目】中查找的问题与解决方案 (未完待续)

10、el-table 判断是多选操作还是单选操作 9、判断数组对象中是否包含某个指定值 需求&#xff1a;修改时数据回填el-select下拉数据&#xff0c;发现当前id在原数组里没有找到&#xff0c;就显示了id值&#xff0c;应该显示name名&#xff0c; 处理&#xff1a;当查找到id…...

力扣sql简单篇练习(十六)

力扣sql简单篇练习(十六) 1 产品销售分析|| 1.1 题目内容 1.1.1 基本题目信息 1.1.2 示例输入输出 1.2 示例sql语句 SELECT p.product_id,sum(s.quantity) total_quantity FROM Product p INNER JOIN Sales s ON p.product_ids.product_id GROUP BY p.product_id1.3 运行截…...

青少年蓝桥杯python组(STEMA中级组)

第一套编程题第一题【编程实现】输入一个字符串&#xff08;N&#xff09;&#xff0c;输出该字符串的长度。输入描述&#xff1a;输入一个字符串 N输出描述&#xff1a;输出该字符串的长度【样例输入】abcd【样例输出】4N input() print(len(N))第二题【提示信息】小蓝家的灯…...

JVM内存结构,Java内存模型,Java对象模型

一.整体方向JVM内存结构是和java虚拟机的运行时区域有关。Java内存模型和java并发编程有关。java对象模型和java对象在虚拟机中的表现形式有关。1.JVM内存结构堆&#xff1a;通过new或者其他指令创建的实例对象&#xff0c;会被垃圾回收。动态分配。虚拟机栈&#xff1a;基本数…...

Lombok 的 @Data 注解失效,未生成 getter/setter 方法引发的HTTP 406 错误

HTTP 状态码 406 (Not Acceptable) 和 500 (Internal Server Error) 是两类完全不同的错误&#xff0c;它们的含义、原因和解决方法都有显著区别。以下是详细对比&#xff1a; 1. HTTP 406 (Not Acceptable) 含义&#xff1a; 客户端请求的内容类型与服务器支持的内容类型不匹…...

FastAPI 教程:从入门到实践

FastAPI 是一个现代、快速&#xff08;高性能&#xff09;的 Web 框架&#xff0c;用于构建 API&#xff0c;支持 Python 3.6。它基于标准 Python 类型提示&#xff0c;易于学习且功能强大。以下是一个完整的 FastAPI 入门教程&#xff0c;涵盖从环境搭建到创建并运行一个简单的…...

iPhone密码忘记了办?iPhoneUnlocker,iPhone解锁工具Aiseesoft iPhone Unlocker 高级注册版​分享

平时用 iPhone 的时候&#xff0c;难免会碰到解锁的麻烦事。比如密码忘了、人脸识别 / 指纹识别突然不灵&#xff0c;或者买了二手 iPhone 却被原来的 iCloud 账号锁住&#xff0c;这时候就需要靠谱的解锁工具来帮忙了。Aiseesoft iPhone Unlocker 就是专门解决这些问题的软件&…...

Golang dig框架与GraphQL的完美结合

将 Go 的 Dig 依赖注入框架与 GraphQL 结合使用&#xff0c;可以显著提升应用程序的可维护性、可测试性以及灵活性。 Dig 是一个强大的依赖注入容器&#xff0c;能够帮助开发者更好地管理复杂的依赖关系&#xff0c;而 GraphQL 则是一种用于 API 的查询语言&#xff0c;能够提…...

【ROS】Nav2源码之nav2_behavior_tree-行为树节点列表

1、行为树节点分类 在 Nav2(Navigation2)的行为树框架中,行为树节点插件按照功能分为 Action(动作节点)、Condition(条件节点)、Control(控制节点) 和 Decorator(装饰节点) 四类。 1.1 动作节点 Action 执行具体的机器人操作或任务,直接与硬件、传感器或外部系统…...

在Ubuntu中设置开机自动运行(sudo)指令的指南

在Ubuntu系统中&#xff0c;有时需要在系统启动时自动执行某些命令&#xff0c;特别是需要 sudo权限的指令。为了实现这一功能&#xff0c;可以使用多种方法&#xff0c;包括编写Systemd服务、配置 rc.local文件或使用 cron任务计划。本文将详细介绍这些方法&#xff0c;并提供…...

Psychopy音频的使用

Psychopy音频的使用 本文主要解决以下问题&#xff1a; 指定音频引擎与设备&#xff1b;播放音频文件 本文所使用的环境&#xff1a; Python3.10 numpy2.2.6 psychopy2025.1.1 psychtoolbox3.0.19.14 一、音频配置 Psychopy文档链接为Sound - for audio playback — Psy…...

爬虫基础学习day2

# 爬虫设计领域 工商&#xff1a;企查查、天眼查短视频&#xff1a;抖音、快手、西瓜 ---> 飞瓜电商&#xff1a;京东、淘宝、聚美优品、亚马逊 ---> 分析店铺经营决策标题、排名航空&#xff1a;抓取所有航空公司价格 ---> 去哪儿自媒体&#xff1a;采集自媒体数据进…...

全志A40i android7.1 调试信息打印串口由uart0改为uart3

一&#xff0c;概述 1. 目的 将调试信息打印串口由uart0改为uart3。 2. 版本信息 Uboot版本&#xff1a;2014.07&#xff1b; Kernel版本&#xff1a;Linux-3.10&#xff1b; 二&#xff0c;Uboot 1. sys_config.fex改动 使能uart3(TX:PH00 RX:PH01)&#xff0c;并让boo…...

C++ Visual Studio 2017厂商给的源码没有.sln文件 易兆微芯片下载工具加开机动画下载。

1.先用Visual Studio 2017打开Yichip YC31xx loader.vcxproj&#xff0c;再用Visual Studio 2022打开。再保侟就有.sln文件了。 易兆微芯片下载工具加开机动画下载 ExtraDownloadFile1Info.\logo.bin|0|0|10D2000|0 MFC应用兼容CMD 在BOOL CYichipYC31xxloaderDlg::OnIni…...