简单SpringBoot+JWT+VUE整合

后端代码目录结构：

首先pom.xml文件引入依赖

    4.0.0
    
        org.springframework.boot
        spring-boot-starter-parent
        2.6.4
         
    
    com
    SpringBoot-JWT
    0.0.1-SNAPSHOT
    war
    SpringBoot-JWT
    SpringBoot-JWT
    
        1.8
    
    
        
            org.springframework.boot
            spring-boot-starter-web
        

        
            org.projectlombok
            lombok
            true
        
        
            org.springframework.boot
            spring-boot-starter-tomcat
            provided
        
        
            org.springframework.boot
            spring-boot-starter-test
            test
        
        
        
            io.jsonwebtoken
            jjwt
            0.9.0
        
    

    
        
            
                org.springframework.boot
                spring-boot-maven-plugin
                
                    
                        
                            org.projectlombok
                            lombok
                        
                    
                
            
        
    

User类

package com.springbootjwt.bean;

import lombok.Data;

@Data
public class User {
    private String username;
    private String password;
    private String token;

}

CorsConfig类：主要配置允许跨域请求

package com.springbootjwt.config;

import org.springframework.context.annotation.Configuration;
import org.springframework.web.servlet.config.annotation.CorsRegistry;
import org.springframework.web.servlet.config.annotation.WebMvcConfigurer;

@Configuration
public class CorsConfig implements WebMvcConfigurer {

    @Override
    public void addCorsMappings(CorsRegistry registry) {
      // 设置允许跨域的路径
        registry.addMapping("/**")
                // 设置允许跨域请求的域名
                .allowedOriginPatterns("*")
                // 是否允许cookie
                .allowCredentials(true)
                // 设置允许的请求方式
                .allowedMethods("GET", "POST", "DELETE", "PUT")
                // 设置允许的header属性
                .allowedHeaders("*")
                // 跨域允许时间
                .maxAge(3600);
    }
}

UserController类

package com.springbootjwt.controller;

import com.springbootjwt.bean.User;
import com.springbootjwt.util.JwtUtils;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RestController;

import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

@RestController
public class UserController {
    private final String USERNAME="admin";
    private final String PASSWORD="123";

    //这里没有从数据库中获取数据，只是为了展示后端怎么使用JWT
    @GetMapping("/login")
    public User login(User user){
        if (USERNAME.equals(user.getUsername())&&PASSWORD.equals(user.getPassword())){
            //添加token
            user.setToken(JwtUtils.CreateToken());
            return user;
        }
        return null;
    }

    @GetMapping("/checkToken")
    public Boolean checkToken(HttpServletRequest request){
        String token=request.getHeader("token");//token存在header里面
        return JwtUtils.checkToken(token);
    }



}

JwtUtils类

package com.springbootjwt.util;

import io.jsonwebtoken.*;

import java.util.Date;
import java.util.UUID;

public class JwtUtils {


    private static long time=1000*60*60*24;//表示有效期为24h
    private static String signature="admin";//定义签名
    public static String CreateToken(){//创建token的方法
        //JwtBuilder用来构建jwt
        JwtBuilder jwtBuilder= Jwts.builder();
        String jwtToken=jwtBuilder
                //header
                .setHeaderParam("typ","JWT")
                .setHeaderParam("alg","HS256")
                //payload
                .claim("username","admin")
                .claim("role","user")
                .setSubject("admin-test")
                .setExpiration(new Date(System.currentTimeMillis()+time))//设置过期时间
                .setId(UUID.randomUUID().toString())
                //signature
                .signWith(SignatureAlgorithm.HS256,signature)
                .compact();//把三部分拼接起来
        return jwtToken;
    }

    //校验token的方法,其实就是解析token，如果解析成功就是可以放行
    public static boolean checkToken(String token){
        if (token==null){
            return false;
        }
        try {
            Jws claimsJws = Jwts.parser().setSigningKey(signature).parseClaimsJws(token);
        } catch (Exception e) {
            return false;
        }
        return true;
    }

}

 前端vue.js发送登录请求

对于请求到的数据如果不为空那么就放在localStorage里面。通过JSON.stringify()函数对json数据转换成字符串的形式存储。 

前端登录后需要进行校验token，也就是调用后端的/checkToken接口，如果token没有或者token失效或者错误那么就会跳转错误界面。