1. 引言
在软件开发过程中，确保系统的安全性是至关重要的一环。它不仅关乎保护用户数据的完整性和隐私性，也是维护系统稳定运行的基石。我认为，从宏观角度审视，软件开发的安全性保障主要可分为两大类：功能性的安全性保障和系统性的安全性校验。
功能性的安全性保障专注于应用程序层面，它着眼于那些直接影响用户数据和交互过程安全的特性。这些特性是构建用户信任和保障数据安全的关键。
而系统性的安全性校验则放眼于更为广阔的视角，它涵盖了整个系统架构和网络层面，确保从服务器到网络的每一环节都具备足够的防御能力，以抵御各种潜在的攻击。
在前文功能性的安全性保障：实现强制登录和密码加密功能，我们已经讨论了功能性的安全性保障中的两个核心议题：身份验证和密码加密。所以在本文中，我们将继续从功能性的安全性保障这个话题展开，通过对概念的细致解读、实施策略的全面分析，以及实际代码实现的展示，深入讨论其中的另外一个核心议题：TOKEN鉴权校验。
2. Token的定义
当我们准备使用Token进行鉴权校验时，首先得先了解Token是什么，我们才能扩展下去。这里简单讲下，所谓Token，是一种数据对象，通常由一组字符组成，主要用户身份验证和授权信息。通常所说的Token可以是多种形式，例如Session ID、Bearer Token、Access Token等。它们的安全性取决于如何生成、存储和传输。
3. JWT（Json Web Token）：用户的身份和权限验证
在实际项目中，常用JWT作为Token来验证用户的身份和权限，确保请求的合法性。这种机制允许系统在不直接存储用户敏感信息的情况下，对用户进行身份验证和授权。
JSON Web Tokens (JWT) 是一种广泛采用的、用于在不同实体间安全传输信息的开放标准（RFC
7519）。它定义了一种紧凑且自包含的方式，允许通过JSON对象在通信双方之间传递安全性声明。这种机制不仅确保了信息的完整性和可验证性，还通过使用数字签名技术，保障了其安全性。在JWT的框架下，令牌（Token）本身封装了一系列声明（Claims），这些声明可以被应用程序用来控制对资源的访问权限。这些声明包括但不限于用户的身份信息、权限级别以及令牌的有效期等。JWT的令牌通常采用JSON Web Signature (JWS) 进行签名，确保了其内容的不可篡改性和验证的可靠性。
3.1 JWT的构成
一个JWT由三部分组成，用点 . 分隔：
- Header（头部）：通常包含令牌的类型（即JWT）和所使用的签名算法（如HS256或RS256）。
- Payload（负载）：包含所谓的Claims（声明），它们是关于实体（通常是用户）和其他数据的声明。例如，用户ID、用户名、角色信息等。
- Signature（签名）：用于验证消息在传输过程中未被篡改，并且，对于使用私钥签名的令牌，还可以验证发送者的身份。
3.2 签名机制
特别地，JWT的签名过程常采用RSA公钥-私钥对机制。这种方式不仅提供了强大的安全保障，还使得JWT在各种应用场景中，如单点登录（SSO）、移动应用认证等，都能发挥其独特的优势。通过这种方式，JWT成为了一种理想的解决方案，用于发布和验证接入令牌（Access Tokens），从而在不同的服务和应用程序之间实现安全、高效的用户认证和授权。
3.3 过期时间
JWT通常包含一个过期时间（exp），这有助于限制Token的生命周期，增加安全性。其他类型的Token可能也需要设置过期时间，但它们的管理方式可能不同。
4. Spring Security：基于令牌的认证机制
另外，还有个话题我们不得不关注，那就是Spring Security。Spring Security是一个功能强大且高度可自定义的认证和访问控制框架，是Spring项目的一部分。它为JVM（Java虚拟机）语言提供了一套全面的安全服务，主要用于保护基于Spring的应用程序。
简单来说，当用户尝试访问一个需要认证的网站或应用时，Spring Security会要求提供Token。只有提供了正确的Token，Spring Security才会让请求通过。
4.1 核心功能
- 认证（Authentication）：
确认用户身份，通常通过用户名和密码，但也支持多种其他认证方法（如OAuth2、JWT、LDAP等）。
提供内置的表单登录和HTTP基本认证。 - 授权（Authorization，也称为访问控制）：
决定已认证的用户是否有权访问某些资源或执行某些操作。
支持基于角色和权限的访问控制。 - 保护Web应用程序：
通过声明式的URL访问配置，定义哪些URL需要认证，哪些URL可以匿名访问。
支持防止常见的Web攻击，如CSRF（跨站请求伪造）、XSS（跨站脚本）等。 - 方法级安全：
使用注解（如 @Secured, @PreAuthorize, @PostAuthorize）对方法调用进行访问控制。
整合其他Spring项目： - 无缝集成Spring Boot、Spring MVC、Spring Data等项目。
5. 代码实现：登录生成TOKEN，并使用TOKEN进行权限校验
5.1 前端代码实现
首先，我们基于之前开发的前端代码进行扩展，在主页创建一个头部导航栏、侧边栏。
<template>
<el-container style="height: 100vh;">
<el-header style="padding: 0; background-color:#545c64; height: 60px;">
<TopNavbar/>
</el-header>
<el-container style="flex: 1; display: flex;">
<SideNavbar />
<el-main style="flex: 1; display: flex; justify-content: center; align-items: center;">
<router-view class="my"></router-view>
</el-main>
</el-container>
</el-container>
</template>
<script>
import TopNavbar from './TopNavbar.vue';
import SideNavbar from "@/views/SideNavbar.vue";
export default {
name: 'HomePage',
components: {
SideNavbar,
TopNavbar,
}
};
</script>
<style>
.el-main {
padding: 0;
}
</style>
头部导航栏主要定义两个按钮，分别是登录按钮和登出按钮，主要为了实现对TOKEN的创建和销毁。
<template>
<div class="navbar">
<div class="navbar-links">
<div class="nav-item" v-if="true">
<el-button @click="goToLogin">登录</el-button>
</div>
<div class="nav-item" v-if="true">
<el-button @click="loginOut">退出</el-button>
</div>
</div>
</div>
</template>
<script >
import { ref } from 'vue';
export default {
methods: {
goToLogin() {
this.$router.push({name: 'Login'});
},
loginOut() {
fetch('http://localhost:8081/user/logout', {
method: 'POST',
headers: {
Authorization: localStorage.getItem('token')
}
}).then(response => {
if (response.ok) {
localStorage.removeItem('token');
this.$router.push('/login');
}
}).catch(error => {
console.log(error);
});
}
}
}
</script>
<style scoped>
.navbar {
display: flex;
justify-content: flex-end; /* 确保内容靠右对齐 */
align-items: center; /* 垂直居中对齐 */
width: 100%;
}
.navbar-links {
display: flex;
justify-content: flex-end; /* 确保按钮靠右对齐 */
}
.nav-item {
margin-right: 15px; /* 可选：增加按钮之间的间距 */
margin-top: 10px;
}
</style>
左侧导航菜单包含两个主项：“首页” 和 “我的”，其中"我的"菜单项下包含个人信息。实现用户界面与路由的集成。
<template>
<el-aside style="width: 200px; background-color: #545c64;">
<el-menu active-text-color="#ffd04b" background-color="#545c64" class="el-menu-vertical-demo"
text-color="#fff" @select="handleSelect" :default-active="activeIndex">
<el-sub-menu index="1">
<template #title>
<span>首页</span>
</template>
</el-sub-menu>
<el-sub-menu index="2">
<template #title>
<span>我的</span>
</template>
<el-menu-item index="2-1" @click="navigateTo('my-page')">个人信息</el-menu-item>
</el-sub-menu>
</el-menu>
</el-aside>
</template>
<script>
export default {
name: 'SideNavbar',
data() {
return {
activeIndex: '2' // 默认激活的菜单项
};
},
methods: {
navigateTo(route) {
this.$router.push({ name: route });
},
handleSelect(index, indexPath) {
this.activeIndex = index;
}
}
};
</script>
接着定义一个个人信息页面，用于用户信息展示和头像上传功能。通过调用后端接口获取和上传数据，并使用 Element Plus 组件进行表单和消息提示的展示。这里目的是展示从本地存储中获取 token，将token作为接口携带参数，调用接口从服务器获取用户信息。如果 token 不存在，则通过 Element Plus 显示错误提示，提示用户需要登录，并重定向到登录页面。
<!-- MePage.vue -->
<template>
<div class="me">
<el-form :model="user" label-width="auto" style="max-width: 600px" enctype="multipart/form-data">
<el-form-item label="头像">
<el-upload
class="avatar-uploader"
:action="uploadUrl"
accept="image/*"
show-file-list="false"
:before-upload="beforeUpload"
:on-success="handleSuccess"
:on-error="handleError"
:on-change="handleFileChange"
>
<img v-if="imageUrl" style="height: 200px; width: 200px" alt="头像" class="avatar" :src="imageUrl"/>
<el-icon class="avatar-uploader-icon" v-else-if="!islook"/>
</el-upload>
</el-form-item>
<el-form-item label="用户名">
<el-input v-model="user.username"/>
</el-form-item>
<el-form-item label="性别">
<el-input v-model="user.sex"/>
</el-form-item>
<el-form-item label="年龄">
<el-input v-model="user.age"/>
</el-form-item>
<el-form-item label="邮箱">
<el-input v-model="user.mailbox"/>
</el-form-item>
<el-form-item label="个人简介">
<el-input v-model="user.introduce" type="textarea"/>
</el-form-item>
</el-form>
</div>
</template>
<script>
import axios from 'axios';
import { ElMessage } from 'element-plus';
export default {
name: 'MePage',
data() {
return {
user: {
userId: '',
sex: '',
age: '',
mailbox: '',
username: '',
introduce: '',
headPortrait: ''
},
uploadUrl: 'http://localhost:8081/upload/avatar',
islook: false,
imgUrl: '../assets/logo.png',
imageUrl: ''
}
},
components: {},
created() {
this.getuser();
},
methods: {
getuser() {
const token = localStorage.getItem('token');
console.log('token:', token);
if (!token) {
ElMessage.error('请先登录');
this.$router.push('/login');
}
axios.get('http://localhost:8081/user/getById?userId=123', {headers: {Authorization: `Bearer ${token}`}}).then(response => {
console.log('服务器返回的数据:', response.data);
this.user = response.data.body;
this.imageUrl = this.user.headPortrait ? `${this.user.headPortrait}` : '@/assets/logo.png';
console.log('图片 URL:', this.imageUrl);
this.islook = true;
}).catch(error => {
console.log(error);
ElMessage.error('获取用户信息失败');
});
},
beforeUpload(file) {
const isImage = file.type.startsWith('image/');
if (!isImage) {
ElMessage.error('只能上传图片文件！');
return false;
}
return isImage;
},
handleSuccess(response) {
console.log('图片 上传成功响应:', response);
if (response.code === 200) {
ElMessage.success('上传成功');
console.log('上传成功');
// 重新调用 getuser 方法以获取最新的头像地址
this.getuser();
} else {
ElMessage.error('上传失败: ' + response.msg);
}
},
handleError(err) {
console.error('图片上传失败:', err);
ElMessage.error('上传失败: ' + (err.message || '未知错误'));
},
handleFileChange(file) {
// 更新显示的图片
const fileURL = file.raw;
this.imageUrl = URL.createObjectURL(fileURL);
}
}
}
</script>
<style scoped>
.me {
display: flex;
justify-content: center;
align-items: center;
height: 100%;
}
.avatar-uploader .el-upload {
border: 1px dashed var(--el-border-color);
border-radius: 6px;
cursor: pointer;
position: relative;
overflow: hidden;
transition: var(--el-transition-duration-fast);
height: 200px;
width: 200px
}
.avatar-uploader .el-upload:hover {
border-color: var(--el-color-primary);
}
</style>
路由这里我们要改下配置，在主页面下配置子页面路径为 '/my-page'。
const routes = [
{
path: '/',
name: 'HomePage',
component: HomePage,
meta: {requiresAuth: true}, // 添加元信息，表示需要认证
children: [
{
path: '/my-page',
name: 'my-page',
component: MePage,
}
]
},
{
path: '/login',
name: 'Login',
component: Login
},
{
path: '/register',
name: 'Register',
component: Register
},
{
path: '/:pathMatch(.*)*',
redirect: '/login' // 捕获所有未定义的路由并重定向到登录页面
}
];
Login.vue组件也需要改下，若登录成功，则存储 TOKEN 到本地并跳转到主页；若登录失败，则显示相应的错误提示，捕获异常以便出错时给予用户反馈。
async login() {
try {
const params = new URLSearchParams();
params.append('username', this.form.username);
params.append('password', this.form.password);
const response = await axios.post('http://127.0.0.1:8081/user/login', params);
console.log("login response:", response);
if (response.data.code === 200) {
this.$message.success('登录成功');
console.log("登录成功，获取到的TOKEN是： " + JSON.stringify(response.data.body))
localStorage.setItem('token', response.data.body);
this.$router.push('/');
} else {
if (response.data.extension && response.data.extension.error) {
this.$message.error('登录失败: ' + response.data.extension.error);
console.log(response.data.extension.error);
} else {
this.$message.error('登录失败');
console.log('未知错误');
}
}
} catch (error) {
console.log(error);
this.$message.error('登录失败');
}
}
5.2后端功能实现
首先引入jwt和Spring Security的依赖
<dependency>
<groupId>io.jsonwebtoken</groupId>
<artifactId>jjwt</artifactId>
<version>0.9.1</version>
</dependency>
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-security</artifactId>
</dependency>
接着我们定义一个JWT工具类，用于生成 JWT Token、验证JWT Token以及反向解析Token，获取用户名。
/**
* 功能描述：JWT工具类
**/
public class JwtUtils {
private static final String SECRET = "USER_JWT_SECRET";
/**
* 功能描述：根据用户名生成JWT token
*
* @param username 用户名
* @return {@code String }
*/
public static String generateToken(String username) {
return Jwts.builder()
.setSubject(username)
.signWith(io.jsonwebtoken.SignatureAlgorithm.HS512, SECRET)
.setExpiration(new Date(System.currentTimeMillis() + 1000 * 60 * 60 * 24)) // 24 小时过期
.compact();
}
/**
* 功能描述： 验证JWT token是否有效
*
* @param token Jwt Token
* @return boolean
*/
public static boolean validateToken(String token) {
try {
Jwts.parser().setSigningKey(SECRET).parseClaimsJws(token);
return true;
} catch (Exception e) {
return false;
}
}
/**
* 功能描述： 从JWT token中获取用户名
*
* @param token Jwt Token
* @return {@code String }
*/
public static String getUsername(String token) {
return Jwts.parser()
.setSigningKey(SECRET)
.parseClaimsJws(token)
.getBody()
.getSubject();
}
}
定义好JwtUtils工具类后，预期是在前端请求后端时，校验是否传入Token以及传入Token的有效性。我们可以在每个接口定义Token校验，当时这样子无疑增加了工作量和代码复杂度，所以这里我使用AOP的形式，利用注解的形式，在接口被请求之前，自动去校验Token。
import java.lang.annotation.ElementType;
import java.lang.annotation.Retention;
import java.lang.annotation.RetentionPolicy;
import java.lang.annotation.Target;
@Target({ElementType.METHOD, ElementType.TYPE})
@Retention(RetentionPolicy.RUNTIME)
public @interface TokenListener {
}
@Aspect
@Component
public class JwtAspect {
@Before("@annotation(com.example.interestplfm.annotation.TokenListener) || @within(com.example.interestplfm.annotation.TokenListener)")
public void validateToken() {
HttpServletRequest request = ((ServletRequestAttributes) RequestContextHolder.getRequestAttributes()).getRequest();
String token = request.getHeader("Authorization");
HttpServletResponse response = ((ServletRequestAttributes) RequestContextHolder.getRequestAttributes()).getResponse();
assert response != null;
if (token != null && token.startsWith("Bearer ")) {
token = token.substring(7);
// 抛出异常，返回401状态码
if (!JwtUtils.validateToken(token)) {
response.setStatus(HttpServletResponse.SC_UNAUTHORIZED);
throw new IllegalArgumentException("用户未成功登录，请先登录！");
}
} else {
response.setStatus(HttpServletResponse.SC_UNAUTHORIZED);
throw new IllegalArgumentException("用户未成功登录，请先登录！");
}
}
}
最后，我们在控制层实现用户相关接口，并对必要的接口进行Token权限校验。
@RestController
@RequestMapping("/user")
@CrossOrigin(origins = "http://localhost:8080")
public class UserController {
@Autowired
private UserService userService;
@PostMapping("/register")
public RestResult<String> register(@RequestParam String username, @RequestParam String password) {
if (userService.registerUser(username, password)) {
return RestResult.build("User registered successfully");
} else {
Map<String, Object> extension = new HashMap<>();
extension.put("error", "User already exists");
return RestResult.buildFailure(extension);
}
}
@PostMapping("/login")
public RestResult<String> login(@RequestParam String username, @RequestParam String password) {
User user = userService.verifyPassword(username, password);
if (user != null) {
String token = JwtUtils.generateToken(user.getUsername());
return RestResult.build(token);
} else {
Map<String, Object> extension = new HashMap<>();
extension.put("error", "Invalid username or password");
return RestResult.buildFailure(extension);
}
}
@GetMapping("/getById")
@TokenListener
public RestResult<User> uploadPicture(@RequestParam("userId") Long userId) {
return RestResult.build(userService.selectByUserId(userId));
}
@PostMapping("/logout")
public void logout(HttpServletRequest request, HttpServletResponse response) {
// 清空当前用户的Token
response.setHeader("Authorization", "");
response.setStatus(HttpServletResponse.SC_OK);
}
}
一切准备就绪，让我们来验证下功能是否达到预期吧。
哦吼~通过点击登录，可以发现并没有反应，一看控制台，提示前端访问后端跨域请求被阻止。 这时候可能有人就疑问了，明明在控制层已经设置了@CrossOrigin(origins = "http://localhost:8080")，允许前端的跨域请求，可为何现在失效了呢？
5.3 Spring Security 的坑
其实，这是由于Spring Security引起的问题，当我们在项目集成了Spring Security功能后，基本会遇到一些常见的“坑”或需要注意的问题。比如说:
- 出现无法登录问题
- 静态资源请求被拦截
- 前端访问后端的请求被拦截
- 出现跨域问题
- 认证和授权逻辑混乱
- 角色和权限的误用
就比如上面跨域的情况，实际上是因为默认情况下，Spring Security启用了CSRF保护，所以在使用REST API时，可能就会导致问题。
要解决这个问题也很简单，可以根据具体情况决定是否禁用CSRF保护，或为特定API端点配置CSRF保护。这里我们定义了一个Spring Security配置类SecurityConfig，配置URL访问权限，允许特定路径或用户进行访问。同时启用CORS配置，允许来自特定域的请求，并允许所有HTTP方法和头部信息，同时允许发送Cookie。也在配置中明确允许访问静态资源。
package com.example.interestplfm.config;
import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;
import org.springframework.security.config.annotation.web.builders.HttpSecurity;
import org.springframework.security.config.annotation.web.configuration.EnableWebSecurity;
import org.springframework.security.config.annotation.web.configuration.WebSecurityConfigurerAdapter;
import org.springframework.web.cors.CorsConfiguration;
import org.springframework.web.cors.CorsConfigurationSource;
import org.springframework.web.cors.UrlBasedCorsConfigurationSource;
@Configuration
@EnableWebSecurity
public class SecurityConfig extends WebSecurityConfigurerAdapter {
@Override
protected void configure(HttpSecurity http) throws Exception {
http.cors().and().csrf().disable()
.authorizeRequests()
.antMatchers("/admin/**").hasRole("ADMIN")
.antMatchers("/user/**").permitAll() // 所有以 /user/ 开头的路径都允许匿名访问
.antMatchers("/upload/**").permitAll() // 所有以 /upload/ 开头的路径都允许匿名访问
.antMatchers("/static/**").permitAll() // 允许静态资源访问
.antMatchers("/css/**", "/js/**", "/image/**").permitAll() // 允许特定静态资源目录访问
.anyRequest().authenticated()
.and().formLogin()
.and().logout()
.logoutUrl("/logout"); // 配置注销URL
}
@Bean
public CorsConfigurationSource corsConfigurationSource() {
CorsConfiguration configuration = new CorsConfiguration();
configuration.addAllowedOrigin("http://localhost:8080"); // 允许的前端域
configuration.addAllowedMethod("*"); // 允许的HTTP方法
configuration.addAllowedHeader("*"); // 允许的头部信息
configuration.setAllowCredentials(true); // 允许发送Cookie
UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource();
source.registerCorsConfiguration("/**", configuration);
return source;
}
}
配置完后，我们再次验证下：可以发现，可以正常登录成功，且可以跳转到个人信息页面进行头像上传和用户信息展示，图片也正常显示，同时点击退出清空了Token后，直接通过输入URL路径请求接口的形式，会直接提示登录失败并回到登录页面。
至此，我们的预期效果已全部实现。
6. 总结
TOKEN鉴权校验作为一种行之有效的安全机制，确保了用户请求的合法性，为用户身份和权限验证提供了坚实的基础。通过使用JWT（JSON Web Tokens）加密用户信息，结合Spring Security进行细粒度的权限认证，我们可以为用户数据提供双重保障，从而实现更高级别的安全性。
