springboot vue token

### Token认证机制概述 Token认证是一种基于令牌的身份验证方法，允许客户端通过发送包含用户身份信息的安全令牌来访问受保护资源。这种方式具有无状态性和良好的可扩展性特点[^1]。 ### Spring Boot后端实现 #### 创建JWT工具类 为了便于操作JSON Web Tokens (JWT)，可以创建一个名为`JwtUtil.java`的实用程序类： ```java import io.jsonwebtoken.Claims; import io.jsonwebtoken.Jwts; import io.jsonwebtoken.SignatureAlgorithm; public class JwtUtil { private String secret = "yourSecretKey"; public String generateToken(String username) { return Jwts.builder() .setSubject(username) .signWith(SignatureAlgorithm.HS256, secret) .compact(); } public Boolean validateToken(String token, String usernameFromToken) { final String username = getUsernameFromToken(token); return (username.equals(usernameFromToken) && !isTokenExpired(token)); } // Other methods like extracting claims or checking expiration... } ``` 此代码片段展示了如何构建并签名一个新的JWT实例。 #### 设置过滤器拦截请求 为了让应用程序能够识别携带有效token的HTTP请求，在Spring Security配置中加入自定义过滤器是非常必要的： ```java @Component public class JwtRequestFilter extends OncePerRequestFilter { @Autowired private MyUserDetailsService userDetailsService; @Autowired private JwtUtil jwtUtil; @Override protected void doFilterInternal(HttpServletRequest request, HttpServletResponse response, FilterChain chain) throws ServletException, IOException { final String authorizationHeader = request.getHeader("Authorization"); String username = null; String jwt = null; if (authorizationHeader != null && authorizationHeader.startsWith("Bearer ")) { jwt = authorizationHeader.substring(7); try{ username = jwtUtil.getUsernameFromToken(jwt); }catch(IllegalArgumentException e){ System.out.println("Unable to get JWT Token"); } catch(JWTVerificationException e){ System.out.println("Failed to parse the token"); } } if (username != null && SecurityContextHolder.getContext().getAuthentication() == null) { UserDetails userDetails = this.userDetailsService.loadUserByUsername(username); if (jwtUtil.validateToken(jwt, userDetails.getUsername())) { UsernamePasswordAuthenticationToken authentication = new UsernamePasswordAuthenticationToken( userDetails, null, userDetails.getAuthorities()); authentication.setDetails(new WebAuthenticationDetailsSource().buildDetails(request)); SecurityContextHolder.getContext().setAuthentication(authentication); } } chain.doFilter(request, response); } } ``` 这段逻辑负责解析传入请求头中的授权字段，并利用之前提到过的`JwtUtil`对象来进行有效性校验。 ### Vue前端集成 对于前端部分，则主要集中在登录页面以及后续每次API调用前附加已获取到的手动管理token上。这里给出一个简单的例子说明怎样在成功登陆之后保存返回来的access_token至本地存储内以便下次自动填充： ```javascript // Login.vue component method section methods: { async login() { const res = await axios.post('/api/authenticate', { email: '[email protected]', password: 'password' }); localStorage.setItem('accessToken', res.data.accessToken); // Store access token locally router.push({ name: 'Home' }); // Redirect after successful log-in }, logout(){ localStorage.removeItem('accessToken'); // Clear stored token on sign out router.push({name:'Login'}); }, fetchProtectedResource(){ let config = {'headers': {}}; if(localStorage.getItem('accessToken')){ config.headers['Authorization'] = `Bearer ${localStorage.getItem('accessToken')}`; } axios.get('/api/secured-endpoint',config).then(response => console.log(response)).catch(error=>console.error(error)) } } ``` 上述脚本实现了基本的功能需求——即当用户提交表单数据给服务器完成鉴权流程后，会收到由服务端颁发的新鲜出炉的token；随后将其妥善保管起来供未来发起其他受限接口请求时所用[^2]。