悠悠楠杉
网站页面
Vue3与SpringSecurity结合JWT实现权限校验的全面指南
06/12
引言
在开发现代Web应用程序时，安全性是一个不可忽视的重要方面。Vue 3 作为前端框架的领航者，而 Spring Security 和 JWT（JSON Web Tokens）则是后端安全领域的两大支柱。本文将详细介绍如何将 Vue 3 与 Spring Security 集成，并利用 JWT 进行用户认证和授权，以实现安全的API访问和界面交互。
一、技术栈简介
- Vue 3: 最新版本的 Vue.js，提供了更强大的响应式系统、更好的 TypeScript 支持以及 Composition API 等新特性。
- Spring Boot: 一个用于创建基于Spring的应用的框架，简化了配置和部署过程。
- Spring Security: Spring Boot的模块化安全框架，提供了全面的安全应用支持。
- JWT: 一种轻量级的、自包含的、基于JSON的用于双方之间安全传输信息的简洁的、URL安全的令牌规范。
二、后端设置（Spring Boot + Spring Security + JWT）
2.1 创建 Spring Boot 项目
使用 Spring Initializr 创建一个新的 Spring Boot 项目，并添加以下依赖：
- Spring Web
- Spring Security
- JWT（如使用 jjwt 或 nimbusds-jwt-util）
- MySQL（或其它数据库）
- Spring Data JPA
2.2 配置 Spring Security
配置安全配置类：创建一个配置类继承
WebSecurityConfigurerAdapter，并重写configure(HttpSecurity http)方法来设置权限和认证机制。
java @Configuration @EnableWebSecurity public class SecurityConfig extends WebSecurityConfigurerAdapter { @Override protected void configure(HttpSecurity http) throws Exception { http.csrf().disable() // 禁用CSRF保护（根据需要启用） .authorizeRequests() .antMatchers("/api/public/**").permitAll() // 公共API不要求认证 .anyRequest().authenticated() // 其它所有请求需要认证 .and() .oauth2ResourceServer().jwt(); // 使用JWT进行认证和授权 } }配置JWT：设置JWT令牌的生成和验证。这通常涉及密钥的生成、令牌的生成与解析等。
java @Bean public JwtDecoder jwtDecoder() { NimbusJwtDecoder jwtDecoder = new NimbusJwtDecoder(new NimbusReactiveJwtDecoder(jwksSetURI)); // 使用JWKs URI获取公钥进行验证 jwtDecoder.setApplicationContext(this); // 设置应用上下文以解析Spring Bean如用户信息转换器等。 return jwtDecoder; }
这里jwksSetURI是JWKs（JSON Web Key Set）的URI，用于从JWKS端点动态获取公钥。
三、前端设置（Vue 3 + Axios + JWT）
3.1 安装和配置 Axios 用于 API 调用：
Axios 是一个基于 Promise 的 HTTP 客户端，适用于浏览器和 node.js。它可以在 Vue 3 中轻松集成以发送带有 JWT 的请求。
bash
npm install axios --save
在 Vue 组件中或全局设置 Axios 实例：javascript
import axios from 'axios';
axios.defaults.baseURL = 'http://localhost:8080/api'; // API的基础URL
axios.defaults.headers.common['Authorization'] = 'Bearer ' + localStorage.getItem('token'); // 从本地存储获取token并附加到头部
在API调用前，添加一个拦截器来处理 JWT 的自动刷新和失效。 详细实现...
