[教程]Java整合Vue实现JWT认证：一步到位的跨平台解决方案

引言随着互联网技术的发展，跨平台应用的需求日益增长。Java和Vue.js分别作为后端和前端技术，广泛应用于企业级应用开发。本文将介绍如何整合Java和Vue.js，实现JWT认证，以构建一个一步到位...

引言

随着互联网技术的发展，跨平台应用的需求日益增长。Java和Vue.js分别作为后端和前端技术，广泛应用于企业级应用开发。本文将介绍如何整合Java和Vue.js，实现JWT认证，以构建一个一步到位的跨平台解决方案。

JWT认证简介

JWT（JSON Web Token）是一种开放标准（RFC 7519），用于在各方之间安全地传输信息作为JSON对象。JWT不依赖于中心化的服务器，因此可以用于分布式系统中，如微服务架构。

Java整合JWT认证

1. 引入依赖

在Java项目中，首先需要引入JWT相关的依赖。以下是Maven的依赖配置：

<dependencies> <dependency> <groupId>io.jsonwebtoken</groupId> <artifactId>jjwt</artifactId> <version>0.9.1</version> </dependency>
</dependencies>

2. 创建JWT工具类

创建一个JWT工具类，用于生成和解析JWT：

import io.jsonwebtoken.Claims;
import io.jsonwebtoken.Jwts;
import io.jsonwebtoken.SignatureAlgorithm;
import java.util.Date;
public class JwtUtil { private static final String SECRET_KEY = "your_secret_key"; private static final long EXPIRATION_TIME = 3600L * 24 * 30; // 30 days public static String generateToken(String username) { return Jwts.builder() .setSubject(username) .setExpiration(new Date(System.currentTimeMillis() + EXPIRATION_TIME)) .signWith(SignatureAlgorithm.HS512, SECRET_KEY) .compact(); } public static Claims parseToken(String token) { return Jwts.parser() .setSigningKey(SECRET_KEY) .parseClaimsJws(token) .getBody(); }
}

3. 验证JWT

在Spring Security中，可以配置一个过滤器来验证JWT：

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.security.core.context.SecurityContextHolder;
import org.springframework.security.core.userdetails.UserDetails;
import org.springframework.security.core.userdetails.UserDetailsService;
import org.springframework.security.core.userdetails.UsernameNotFoundException;
import org.springframework.security.crypto.bcrypt.BCryptPasswordEncoder;
import org.springframework.security.crypto.password.PasswordEncoder;
import org.springframework.security.web.authentication.UsernamePasswordAuthenticationFilter;
@EnableWebSecurity
public class SecurityConfig extends WebSecurityConfigurerAdapter { private final UserDetailsService userDetailsService; private final PasswordEncoder passwordEncoder; public SecurityConfig(UserDetailsService userDetailsService, PasswordEncoder passwordEncoder) { this.userDetailsService = userDetailsService; this.passwordEncoder = passwordEncoder; } @Override protected void configure(HttpSecurity http) throws Exception { http .csrf().disable() .authorizeRequests() .antMatchers("/api/auth/**").permitAll() .anyRequest().authenticated() .and() .addFilterBefore(new JwtAuthenticationFilter(), UsernamePasswordAuthenticationFilter.class); } @Bean public UserDetailsService userDetailsService() { return username -> { UserDetails userDetails = new org.springframework.security.core.userdetails.User( username, passwordEncoder.encode("password"), new ArrayList<>()); return userDetails; }; } @Bean public PasswordEncoder passwordEncoder() { return new BCryptPasswordEncoder(); }
}
class JwtAuthenticationFilter extends BasicAuthenticationFilter { public JwtAuthenticationFilter(AuthenticationManager authenticationManager) { super(authenticationManager); } @Override protected void doFilterInternal(HttpServletRequest request, HttpServletResponse response, FilterChain chain) throws IOException, ServletException { String token = request.getHeader("Authorization"); if (token != null && token.startsWith("Bearer ")) { token = token.substring(7); Claims claims = JwtUtil.parseToken(token); UsernamePasswordAuthenticationToken auth = new UsernamePasswordAuthenticationToken( claims.getSubject(), null, new ArrayList<>()); SecurityContextHolder.getContext().setAuthentication(auth); } chain.doFilter(request, response); }
}

Vue.js整合JWT认证

1. 引入依赖

在Vue.js项目中，首先需要引入axios库，用于发送HTTP请求：

npm install axios

2. 创建JWT工具类

创建一个JWT工具类，用于存储和获取JWT：

export const jwtUtil = { setToken(token) { localStorage.setItem('token', token); }, getToken() { return localStorage.getItem('token'); }, removeToken() { localStorage.removeItem('token'); }
};

3. 登录和获取JWT

在登录接口中，获取用户名和密码，调用后端API获取JWT，并存储到本地存储中：

import axios from 'axios';
import jwtUtil from './jwtUtil';
export const login = async (username, password) => { try { const response = await axios.post('/api/auth/login', { username, password }); jwtUtil.setToken(response.data.token); return response.data; } catch (error) { console.error(error); return null; }
};

4. 验证JWT

在请求头中添加JWT，用于验证用户身份：

axios.interceptors.request.use(config => { const token = jwtUtil.getToken(); if (token) { config.headers.Authorization = `Bearer ${token}`; } return config;
}, error => { return Promise.reject(error);
});

总结

通过整合Java和Vue.js，并使用JWT认证，我们可以构建一个一步到位的跨平台解决方案。本文介绍了如何实现JWT认证，并提供了Java和Vue.js的示例代码。在实际项目中，可以根据具体需求进行调整和优化。