在构建现代 Web 应用时，安全地管理用户认证是至关重要的。JSON Web Tokens (JWT) 提供了一种有效的方式来处理认证和授权。本文将详细介绍如何在结合 Spring Boot 和 Vue.js 的应用中使用 JWT 进行接口认证，包括 JWT 的基本概念、Spring Boot 后端的设置、Vue.js 前端的集成，以及整个流程的测试和验证。

JWT 基础

理解 JWT

• JWT 是一种用于安全传输信息的简洁、自包含的方法。
• 一个 JWT 通常包含三部分：头部（Header）、有效载荷（Payload）、签名（Signature）。

设置 Spring Boot 后端

添加依赖

• 在 Spring Boot 项目的 pom.xml 或 build.gradle 中添加 JWT 相关依赖。

<!-- pom.xml -->
<dependency>
    <groupId>io.jsonwebtoken</groupId>
    <artifactId>jjwt</artifactId>
    <version>0.9.1</version>
</dependency>

创建 JWT 工具类

• 创建一个工具类来生成和验证 JWT。

import io.jsonwebtoken.Jwts;
import io.jsonwebtoken.SignatureAlgorithm;

public class JwtUtil {
    private static final String SECRET_KEY = "your_secret_key";

    public static String generateToken(String username) {
        return Jwts.builder()
                .setSubject(username)
                .signWith(SignatureAlgorithm.HS512, SECRET_KEY)
                .compact();
    }

    public static String validateTokenAndGetSubject(String token) {
        return Jwts.parser()
                .setSigningKey(SECRET_KEY)
                .parseClaimsJws(token)
                .getBody()
                .getSubject();
    }
}

集成 Spring Security

• 在 Spring Boot 项目中配置 Spring Security，以使用 JWT 进行认证。

import org.springframework.security.config.annotation.web.builders.HttpSecurity;
import org.springframework.security.config.annotation.web.configuration.WebSecurityConfigurerAdapter;

public class SecurityConfig extends WebSecurityConfigurerAdapter {

    @Override
    protected void configure(HttpSecurity http) throws Exception {
        http
            .csrf().disable()
            .authorizeRequests()
            .anyRequest().authenticated()
            .and()
            .addFilter(new JwtAuthenticationFilter(authenticationManager()));
    }
}

Vue.js 前端集成

安装 Axios

• 在 Vue.js 项目中安装 Axios，用于发送 HTTP 请求。

npm install axios

创建认证服务

• 在 Vue.js 项目中创建一个服务来处理登录和 JWT 存储。

import axios from 'axios';

const API_URL = 'http://localhost:8080/api/auth/';

class AuthService {
  login(user) {
    return axios
      .post(API_URL + 'signin', {
        username: user.username,
        password: user.password
      })
      .then(response => {
        if (response.data.token) {
          localStorage.setItem('user', JSON.stringify(response.data));
        }
        return response.data;
      });
  }

  logout() {
    localStorage.removeItem('user');
  }

  getCurrentUser() {
    return JSON.parse(localStorage.getItem('user'));
  }
}

export default new AuthService();

用户认证流程

用户登录

• 用户在前端应用中输入凭据并提交。
• 前端应用调用后端 API，并携带用户凭据。
• 后端验证凭据，生成 JWT 并返回。

发送带有 JWT 的请求

• 在每次请求中，将 JWT 添加到请求头。

axios.interceptors.request.use(
  config => {
    let user = JSON.parse(localStorage.getItem('user'));
    if (user && user.token) {
      config.headers['Authorization'] = 'Bearer ' + user.token;
    }
    return config;
  },
  error => {
    return Promise.reject(error);
  }
);

后端验证 JWT

• 对于每个受保护的路由，后端解析和验证 JWT。

测试和验证

测试认证流程

• 测试用户登录、获取 JWT 以及使用 JWT 访问受保护的资源。

安全性和错误处理

• 确保处理各种认证相关的错误。
• 保护 JWT 密钥的安全性。

总结

通过结合 Spring Boot 和 Vue.js 使用 JWT，我们可以构建一个安全且高效的用户认证系统。本文介绍了从后端的 JWT 生成和验证到前端的 JWT 管理和使用的完整流程，提供了一种有效的前后端分离认证解决方案。