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失效或者错误那么就会跳转错误界面。