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

springboot Security vue

在使用Spring Boot Security与Vue.js构建前后端分离的应用时,你需要处理几个关键的技术点,包括认证(Authentication)和授权(Authorization),以及如何处理跨域请求(CORS)、前端路由、后端API保护等。以下是一个基本的概述和步骤,帮助你开始这样的项目。

1. 搭建Spring Boot后端

添加Spring Boot Security依赖

在你的Spring Boot项目的pom.xml中添加Spring Security依赖。

<dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-security</artifactId>
</dependency>
配置Spring Security

在Spring Boot应用中配置Security,定义用户、角色和权限。你可能需要自定义WebSecurityConfigurerAdapter类来配置HTTP安全策略。

@Configuration
@EnableWebSecurity
public class WebSecurityConfig extends WebSecurityConfigurerAdapter {@Overrideprotected void configure(HttpSecurity http) throws Exception {http.authorizeRequests().antMatchers("/api/public/**").permitAll().anyRequest().authenticated().and().formLogin().loginPage("/login").permitAll().and().logout().permitAll();// 跨域配置,通常应该在CORS Filter中处理}// 配置用户详情服务(内存、数据库等)@Autowiredpublic void configureGlobal(AuthenticationManagerBuilder auth) throws Exception {auth.inMemoryAuthentication().withUser("user").password("{noop}password").roles("USER");}
}

2. 搭建Vue.js前端

创建Vue项目

使用Vue CLI创建一个新的Vue项目。

vue create my-vue-app
cd my-vue-app
集成Axios进行HTTP请求

安装Axios用于在Vue应用中发送HTTP请求到Spring Boot后端。

npm install axios

在Vue组件中使用Axios进行API调用,并处理认证信息(如JWT令牌)。

import axios from 'axios';axios.create({baseURL: 'http://localhost:8080',headers: {'Authorization': 'Bearer ' + localStorage.getItem('jwtToken')}
});// 使用axios进行GET、POST等请求
axios.get('/api/data').then(response => {console.log(response.data);}).catch(error => {console.error(error);});

3. 处理认证和授权

JWT(JSON Web Tokens)

Spring Boot Security可以配置为使用JWT来处理认证信息。在登录成功后,后端会生成一个JWT令牌,并将其发送给前端。前端在随后的请求中会将此令牌包含在HTTP请求的头部中。

Vue Router 导航守卫

在Vue中,你可以使用Vue Router的导航守卫来检查用户是否已登录或拥有访问特定路由的权限。

router.beforeEach((to, from, next) => {const publicPages = ['/login', '/register'];const authRequired = !publicPages.includes(to.path);const loggedIn = !!localStorage.getItem('jwtToken');if (authRequired && !loggedIn) {next('/login');} else {next();}
});

4. 跨域资源共享(CORS)

由于你的前端和后端可能运行在不同的域或端口上,因此你需要配置CORS以允许跨域请求。这通常在Spring Security配置中通过添加一个CORS配置过滤器来实现。

/*** 跨域设置*/
@Configuration
public class CorsConfig implements WebMvcConfigurer {@Overridepublic void addCorsMappings(CorsRegistry registry) {registry.addMapping("/**") // 允许所有路径.allowedOrigins("http://example.com", "http://www.example.com") // 允许的源.allowedMethods("GET", "POST", "PUT", "DELETE", "OPTIONS") // 允许的HTTP方法.allowedHeaders("*") // 允许的HTTP头部.allowCredentials(true) // 是否允许发送Cookie.maxAge(3600); // 预检请求的缓存时间(秒)
//        WebMvcConfigurer.super.addCorsMappings(registry);}
}

注意:在生产环境中,你应该限制允许的源和头,以提高安全性。

5. 部署和测试

确保你的前端和后端都能正确运行,并进行全面的测试

相关文章:

springboot Security vue

在使用Spring Boot Security与Vue.js构建前后端分离的应用时&#xff0c;你需要处理几个关键的技术点&#xff0c;包括认证&#xff08;Authentication&#xff09;和授权&#xff08;Authorization&#xff09;&#xff0c;以及如何处理跨域请求&#xff08;CORS&#xff09;、…...

13. 计算机网络HTTPS协议(一)

1. 前言 在上一章节中我们介绍了 HTTP 协议相关的面试题目,作为 HTTP 协议的扩展,HTTPS 协议也经常被面试官提起。 因为对于大部分的前端、后端开发者,都接触不到 HTTPS 协议的开发场景,因为我们往往只关注请求路径后缀,例如关注 URL: /get/username,而非路径全称 htt…...

Bean的作用域和生命周期

Bean的作用域 我们先来看下面这段代码 首先是一个Dog类 &#xff08;此处使用lombok来完成setter、getter、toString方法&#xff09; Setter Getter public class Dog {private String name;} 然后在DogBeanConfig类里面写一个返回Dog的方法&#xff0c;并将这个方法的返…...

【Qt】QMainWindow之菜单栏

目录 一.菜单栏 1.概念 2.组成 二.代码创建菜单栏 1.创建菜单栏 2.在菜单栏中添加菜单 3.在菜单中添加菜单项 三.图形化创建菜单栏 1.在打开Qt自带的ui文件界面后&#xff0c;得到以下界面 2.双击点击界面中&#xff08;在这里输入&#xff09;&#xff0c;在菜单栏中进行…...

uni-app封装组件实现下方滑动弹出模态框

子组件 <template><div class"bottom-modal" :class"{show: showModal}"><div class"modal-content" :class"{show: showModal}"><!-- 内容区域 --><slot></slot></div></div></…...

MATLAB(15)分类模型

一、前言 在MATLAB中&#xff0c;实现不同类型的聚类&#xff08;如K-means聚类、层次聚类、模糊聚类&#xff09;和分类&#xff08;如神经网络分类&#xff09;需要用到不同的函数和工具箱。下面我将为每种方法提供一个基本的示例代码。 二、实现 1. K-means聚类 % 假设X是…...

非虚拟机安装Centos7连接wifi并开机自动联网

一&#xff1a;确认网卡名称 ip addr 无线网卡是以 w 开头&#xff0c;确定是wlp4s0 &#xff0c;有的是 wlp5s0 二&#xff1a;配置网络 wpa_supplicant -B -i wlp4s0 -c <(wpa_passphrase "网络的名字" “网络的密码“) 设置自动分配IP dhclient wlp4s0 三&…...

怎么选择的开放式耳机好用?2024超值耳机分享!

耳机在当前数字化时代已成为我们生活、娱乐乃至工作中的重要部分。随着市场需求的增长&#xff0c;消费者对耳机的期望也在提高&#xff0c;他们不仅追求音质的卓越&#xff0c;还关注佩戴的舒适度和外观设计。虽然传统的入耳式和半入耳式耳机在音质上往往能够满足人们&#xf…...

Web 框架

Web 框架 Web服务器Web服务器的主要功能常见的Web服务器软件包 Web 框架常用 Python Web 框架选择Python Web框架的考虑因素 WSGIWSGI的主要特点WSGI的工作原理常见的WSGI服务器和框架&#xff1a; 静态资源定义与特点静态资源的类型静态资源的管理与优化 动态资源定义与特点动…...

嗖嗖移动业务大厅(JDBC)

一、项目介绍 1、项目背景: 该项目旨在模拟真实的移动业务大厅&#xff0c;。用户可以注册新卡、查询账单、管理套餐、充值话费、打印消费记录等功能。同时&#xff0c;项目还模拟了用户使用场景&#xff0c;如通话、上网、发短信等&#xff0c;并根据套餐规则进行相应的扣费…...

大学生编程入门指南:如何从零开始?

人不走空 &#x1f308;个人主页&#xff1a;人不走空 &#x1f496;系列专栏&#xff1a;算法专题 ⏰诗词歌赋&#xff1a;斯是陋室&#xff0c;惟吾德馨 目录 编程语言选择 &#x1f4da; 1. Python 2. JavaScript 3. Java 4. C/C 如何选择适合自己的编程语言&a…...

如何基于欧拉系统完成数据库的安装

一、安装 当我们直接进行安装软件包时&#xff0c;会提示有冲突&#xff0c;此时&#xff0c;我们应该这样来解决 使用rpm命令 [rootlocalhost yum.repos.d]# rpm -qa | grep selinux使用 rpm命令卸载以下两个软件包 [rootlocalhost yum.repos.d]# rpm -e selinux-policy-3…...

防御笔记第九天(持续更新)

注意&#xff1a;攻击可能只是一个点&#xff0c;而防御需要全方面进行。 1.IAE引擎 2.DPI DPI ----深度包检测 --- 针对完整的数据包&#xff0c;进行内容的识别和检测 3.基于特征字的检测技术 4&#xff0c;基于应用网关的检测技术 基于应用网关的检测技术 --- 有些应用控…...

html+css+js前端作业和平精英6个页面页面带js

htmlcssjs前端作业和平精英6个页面页面带js 下载地址 https://download.csdn.net/download/qq_42431718/89595600 目录1 目录2 项目视频 htmlcssjs前端作业和平精英6个页面带js 页面1 页面2 页面3 页面4 页面5 页面6...

详解基于百炼平台及函数计算快速上线网页AI助手

引言 在当今这个信息爆炸的时代&#xff0c;用户对于在线服务的需求越来越趋向于即时性和个性化。无论是寻找产品信息、解决问题还是寻求建议&#xff0c;人们都期望能够获得即时反馈。这对企业来说既是挑战也是机遇——如何在海量信息中脱颖而出&#xff0c;提供高效且贴心的…...

【TVM 教程】在 CUDA 上部署量化模型

更多 TVM 中文文档可访问 →Apache TVM 是一个端到端的深度学习编译框架&#xff0c;适用于 CPU、GPU 和各种机器学习加速芯片。 | Apache TVM 中文站 作者&#xff1a;Wuwei Lin 本文介绍如何用 TVM 自动量化&#xff08;TVM 的一种量化方式&#xff09;。有关 TVM 中量化的…...

使用 continue 自定义 AI 编程环境

一直在使用github 的 copilot 来编程&#xff0c;确实好用&#xff0c;对编码效率有很大提升。 但是站在公司角度&#xff0c;因为它只能对接公网&#xff08;有代码安全问题&#xff09;。另外&#xff0c;它的扩展能力也不强&#xff0c;无法适配公司特定领域的知识库&#x…...

谷粒商城实战笔记-118-全文检索-ElasticSearch-进阶-aggregations聚合分析

文章目录 一&#xff0c;基本概念主要聚合类型 二&#xff0c;实战1&#xff0c;搜索 address 中包含 mill 的所有人的年龄分布以及平均年龄&#xff0c;但不显示这些人的详情2&#xff0c;按照年龄聚合&#xff0c;并且请求每个年龄的平均薪资 Elasticsearch 的聚合&#xff0…...

ansible,laas,pass,sass

ansible是新出现的自动化运维工具&#xff0c;基于Python开发&#xff0c;集合了众多运维工具&#xff08;puppet、chef、func、fabric&#xff09;的优点&#xff0c;实现了批量系统配置、批量程序部署、批量运行命令等功能。ansible是基于 paramiko 开发的,并且基于模块化工作…...

【开源分享】PHP在线提交工单源码|工单管理系统源码 (附源码搭建教程)

一、设备报修工作内容 1.工单管理&#xff1a;设备报修系统可以将设备故障统计为工单并对工单进行汇总管理。将工单数据进行归类&#xff0c;将故障分类进行查看、统计、分析等等。 2.设备状态&#xff1a;工单可通过用户上报设备状态数据进行查看&#xff0c;维修工程师在维…...

STM32+rt-thread判断是否联网

一、根据NETDEV_FLAG_INTERNET_UP位判断 static bool is_conncected(void) {struct netdev *dev RT_NULL;dev netdev_get_first_by_flags(NETDEV_FLAG_INTERNET_UP);if (dev RT_NULL){printf("wait netdev internet up...");return false;}else{printf("loc…...

CentOS下的分布式内存计算Spark环境部署

一、Spark 核心架构与应用场景 1.1 分布式计算引擎的核心优势 Spark 是基于内存的分布式计算框架&#xff0c;相比 MapReduce 具有以下核心优势&#xff1a; 内存计算&#xff1a;数据可常驻内存&#xff0c;迭代计算性能提升 10-100 倍&#xff08;文档段落&#xff1a;3-79…...

鸿蒙中用HarmonyOS SDK应用服务 HarmonyOS5开发一个医院挂号小程序

一、开发准备 ​​环境搭建​​&#xff1a; 安装DevEco Studio 3.0或更高版本配置HarmonyOS SDK申请开发者账号 ​​项目创建​​&#xff1a; File > New > Create Project > Application (选择"Empty Ability") 二、核心功能实现 1. 医院科室展示 /…...

2023赣州旅游投资集团

单选题 1.“不登高山&#xff0c;不知天之高也&#xff1b;不临深溪&#xff0c;不知地之厚也。”这句话说明_____。 A、人的意识具有创造性 B、人的认识是独立于实践之外的 C、实践在认识过程中具有决定作用 D、人的一切知识都是从直接经验中获得的 参考答案: C 本题解…...

使用Matplotlib创建炫酷的3D散点图:数据可视化的新维度

文章目录 基础实现代码代码解析进阶技巧1. 自定义点的大小和颜色2. 添加图例和样式美化3. 真实数据应用示例实用技巧与注意事项完整示例(带样式)应用场景在数据科学和可视化领域,三维图形能为我们提供更丰富的数据洞察。本文将手把手教你如何使用Python的Matplotlib库创建引…...

Linux C语言网络编程详细入门教程:如何一步步实现TCP服务端与客户端通信

文章目录 Linux C语言网络编程详细入门教程&#xff1a;如何一步步实现TCP服务端与客户端通信前言一、网络通信基础概念二、服务端与客户端的完整流程图解三、每一步的详细讲解和代码示例1. 创建Socket&#xff08;服务端和客户端都要&#xff09;2. 绑定本地地址和端口&#x…...

Fabric V2.5 通用溯源系统——增加图片上传与下载功能

fabric-trace项目在发布一年后,部署量已突破1000次,为支持更多场景,现新增支持图片信息上链,本文对图片上传、下载功能代码进行梳理,包含智能合约、后端、前端部分。 一、智能合约修改 为了增加图片信息上链溯源,需要对底层数据结构进行修改,在此对智能合约中的农产品数…...

STM32HAL库USART源代码解析及应用

STM32HAL库USART源代码解析 前言STM32CubeIDE配置串口USART和UART的选择使用模式参数设置GPIO配置DMA配置中断配置硬件流控制使能生成代码解析和使用方法串口初始化__UART_HandleTypeDef结构体浅析HAL库代码实际使用方法使用轮询方式发送使用轮询方式接收使用中断方式发送使用中…...

【网络安全】开源系统getshell漏洞挖掘

审计过程&#xff1a; 在入口文件admin/index.php中&#xff1a; 用户可以通过m,c,a等参数控制加载的文件和方法&#xff0c;在app/system/entrance.php中存在重点代码&#xff1a; 当M_TYPE system并且M_MODULE include时&#xff0c;会设置常量PATH_OWN_FILE为PATH_APP.M_T…...

Python 实现 Web 静态服务器(HTTP 协议)

目录 一、在本地启动 HTTP 服务器1. Windows 下安装 node.js1&#xff09;下载安装包2&#xff09;配置环境变量3&#xff09;安装镜像4&#xff09;node.js 的常用命令 2. 安装 http-server 服务3. 使用 http-server 开启服务1&#xff09;使用 http-server2&#xff09;详解 …...