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. 部署和测试

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

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.rhkb.cn/news/386921.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

【JavaScript】函数声明和函数表达式的区别

文章目录 一、函数声明1. 定义方式2. 作用域提升&#xff08;Hoisting&#xff09;3. 块级作用域 二、函数表达式1. 定义方式2. 作用域提升&#xff08;Hoisting&#xff09;3. 自引用 三、其他区别1. 函数名2. 可读性和代码组织3. 使用场景 四、总结函数声明函数表达式 在Java…

【大模型系列】Video-LaVIT(2024.06)

Paper&#xff1a;https://arxiv.org/abs/2402.03161Github&#xff1a;https://video-lavit.github.io/Title&#xff1a;Video-LaVIT: Unified Video-Language Pre-training with Decoupled Visual-Motional TokenizationAuthor&#xff1a;Yang Jin&#xff0c; 北大&#x…

Java面试八股之@Qualifier的作用

Qualifier的作用 Qualifier 是 Spring 框架中的一个非常有用的注解&#xff0c;它主要用于解决在依赖注入过程中出现的歧义问题。当 Spring 容器中有多个相同类型的 Bean 时&#xff0c;Qualifier 可以帮助指明应该使用哪一个具体的 Bean 进行注入。 Qualifier 的作用&#x…

外设购物平台

目 录 一、系统分析 二、系统设计 2.1 系统功能设计 2.2 数据库设计 三、系统实现 3.1 注册功能 3.2 登录功能 3.3 分页查询所有商品信息功能 3.4 分页条件&#xff08;精确、模糊&#xff09;查询商品信息功能 3.5 购物车功能 3.6 订单管理功能 四、项…

【Opencv】模糊

消除噪声 用该像素周围的平均值代替该像素值 4个函数 blur():最经典的 import os import cv2 img cv2.imread(os.path.join(.,dog.jpg)) k_size 7 #窗口大小&#xff0c;数字越大&#xff0c;模糊越强 img_blur cv2.blur(img,(k_size,k_size)) #窗口是正方形&#xff…

云计算实训16——关于web,http协议,https协议,apache,nginx的学习与认知

一、web基本概念和常识 1.Web Web 服务是动态的、可交互的、跨平台的和图形化的为⽤户提供的⼀种在互联⽹上浏览信息的服务。 2.web服务器&#xff08;web server&#xff09; 也称HTTP服务器&#xff08;HTTP server&#xff09;&#xff0c;主要有 Nginx、Apache、Tomcat 等。…

C#使用csvhelper实现csv的操作

新建控制台项目 安装csvhelper 33.0.1 写入csv 新建Foo.cs namespace CsvSut02;public class Foo {public int Id { get; set; }public string Name { get; set; } }批量写入 using System.Globalization; using CsvHelper; using CsvHelper.Configuration;namespace Csv…

[数据集][目标检测]金属罐缺陷检测数据集VOC+YOLO格式8095张4类别

数据集格式&#xff1a;Pascal VOC格式YOLO格式(不包含分割路径的txt文件&#xff0c;仅仅包含jpg图片以及对应的VOC格式xml文件和yolo格式txt文件) 图片数量(jpg文件个数)&#xff1a;8095 标注数量(xml文件个数)&#xff1a;8095 标注数量(txt文件个数)&#xff1a;8095 标注…

使用Process Explorer和Dependency Walker排查dll动态库加载失败的问题

目录 1、问题描述 2、如何调试Release版本的代码&#xff1f; 3、使用Process Explorer查看exe主程序加载的dll库列表&#xff0c;发现mediaplay.dll没有加载起来 4、使用Dependency Walker查看rtcmpdll.dll的库依赖关系和接口调用情况&#xff0c;定位问题 4.1、使用Depe…

Javascript面试基础6【每日更新10】

Gulp gulp是前端开发过程中一种基于流的代码构建工具&#xff0c;是自动化项目的构建利器;它不仅能对网站资源进行优化&#xff0c;而且在开发过程中很多重复的任务能够使用正确的工具自动完成 Gulp的核心概念:流 流&#xff0c;简单来说就是建立在面向对象基础上的一种抽象的…

多微信聚合神器:高效沟通,一个界面全搞定!

大家都知道&#xff0c;频繁的来回切换微信&#xff0c;不仅浪费时间&#xff0c;还容易错过重要的信息。 今天&#xff0c;我要向大家推荐一款多微信管理神器——个微管理系统&#xff0c;助你实现统一管理&#xff0c;聚合聊天&#xff0c;让沟通变得更加高效。 1、网页扫码…

基于MindIE实现通义千问Qwen推理加速

一、昇腾开发者平台申请镜像 登录Ascend官网昇腾社区-官网丨昇腾万里 让智能无所不及 二、登录并下载mindie镜像 #登录docker login -u XXX#密码XXX#下载镜像docker pull XXX 三、下载Qwen的镜像 使用wget命令下载Qwen1.5-0.5B-Chat镜像&#xff0c;放在/mnt/Qwen/Qwen1.5-…

【无标题】Git(仓库,分支,分支冲突)

Git 一种分布式版本控制系统&#xff0c;用于跟踪和管理代码的变更 一&#xff0e;Git的主要功能&#xff1a; 二&#xff0e;准备git机器 修改静态ip&#xff0c;主机名 三&#xff0e;git仓库的建立&#xff1a; 1.安装git [rootgit ~]# yum -y install git 2.创建一个…

【策略工厂模式】记录策略工厂模式简单实现

策略工厂模式 1. 需求背景2. 代码实现2.1 定义基类接口2.2 排序策略接口定义2.3 定义抽象类&#xff0c;实现策略接口2.4 具体的排序策略实现类2.5 实现策略工厂类2.6 控制类 3. 启动测试4. 总结 1. 需求背景 现在需要你创建一个策略工厂类&#xff0c;来根据策略实现各种排序…

【JAVA】记录一次前端无能造成的 线上bug

有一个需求是 当方式切换 垫资时 清空 当前所选细单商品 但是前端的奇葩 操作是&#xff0c;只是在页面上清空 细单。 不请求 后台删除 细单 让前端 必须 清空同时 请求后台 删除细单 但是 该前端 技术不行&#xff0c; 嫌麻烦 不做 只好 后台 判断该类型时 进行删除操作…

AutoMQ 开源可观测性方案:夜莺 Flashcat

01 引言 在现代企业中&#xff0c;随着数据处理需求的不断增长&#xff0c;AutoMQ [1] 作为一种高效、低成本的流处理系统&#xff0c;逐渐成为企业实时数据处理的关键组件。然而&#xff0c;随着集群规模的扩大和业务复杂性的增加&#xff0c;确保 AutoMQ 集群的稳定性、高可…

权限管理的概述以及vue开发前端的路由、菜单、按钮权限控制实现方案

1. 权限管理概念 1.1 权限定义 权限管理是确保用户只能访问被授权资源的机制。在计算机系统中&#xff0c;权限通常指对特定数据或功能的访问权。权限的设置和控制对于保护数据安全和系统安全至关重要。 1.2 前端权限控制重要性 前端权限控制是用户与应用交互的第一道防线。…

黑马头条Day12-项目部署_持续集成

一、今日内容介绍 1. 什么是持续集成 持续集成&#xff08;Continuous integration&#xff0c;简称CI&#xff09;&#xff0c;指的是频繁地&#xff08;一天多次&#xff09;将代码集成到主干。 持续集成的组成要素&#xff1a; 一个自动构建过程&#xff0c;从检出代码、…

jdk版本管理利器-sdkman

1.什么是sdkman&#xff1f; sdkman是一个轻量级、支持多平台的开源开发工具管理器&#xff0c;可以通过它安装任意主流发行版本&#xff08;例如OpenJDK、Kona、GraalVM等等&#xff09;的任意版本的JDK。通过下面的命令可以轻易安装sdkman: 2.安装 curl -s "https://…

什么是 5G?

什么是 5G&#xff1f; 5G 是第五代无线蜂窝技术&#xff0c;与以前的网络相比&#xff0c;它提供了更高的上传和下载速度、更一致的连接以及更高的容量。5G 比目前流行的 4G 网络更快、更可靠&#xff0c;并有可能改变我们使用互联网访问应用程序、社交网络和信息的方式。例如…