简单SpringBoot+JWT+VUE整合

JWT具体流程

后端代码：

后端代码目录结构：

 

首先pom.xml文件引入依赖

<?xml version="1.0" encoding="UTF-8"?>
<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
         xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 https://maven.apache.org/xsd/maven-4.0.0.xsd">
    <modelVersion>4.0.0</modelVersion>
    <parent>
        <groupId>org.springframework.boot</groupId>
        <artifactId>spring-boot-starter-parent</artifactId>
        <version>2.6.4</version>
        <relativePath/> <!-- lookup parent from repository -->
    </parent>
    <groupId>com</groupId>
    <artifactId>SpringBoot-JWT</artifactId>
    <version>0.0.1-SNAPSHOT</version>
    <packaging>war</packaging>
    <name>SpringBoot-JWT</name>
    <description>SpringBoot-JWT</description>
    <properties>
        <java.version>1.8</java.version>
    </properties>
    <dependencies>
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-web</artifactId>
        </dependency>

        <dependency>
            <groupId>org.projectlombok</groupId>
            <artifactId>lombok</artifactId>
            <optional>true</optional>
        </dependency>
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-tomcat</artifactId>
            <scope>provided</scope>
        </dependency>
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-test</artifactId>
            <scope>test</scope>
        </dependency>
        <!--jwt依赖-->
        <dependency>
            <groupId>io.jsonwebtoken</groupId>
            <artifactId>jjwt</artifactId>
            <version>0.9.0</version>
        </dependency>
    </dependencies>

    <build>
        <plugins>
            <plugin>
                <groupId>org.springframework.boot</groupId>
                <artifactId>spring-boot-maven-plugin</artifactId>
                <configuration>
                    <excludes>
                        <exclude>
                            <groupId>org.projectlombok</groupId>
                            <artifactId>lombok</artifactId>
                        </exclude>
                    </excludes>
                </configuration>
            </plugin>
        </plugins>
    </build>

</project>

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<Claims> claimsJws = Jwts.parser().setSigningKey(signature).parseClaimsJws(token);
        } catch (Exception e) {
            return false;
        }
        return true;
    }

}

 前端vue.js发送登录请求

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

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