[Vue]之Jwt的入门和Jwt工具类的使用及Jwt集成spa项目

本文涉及的产品
全局流量管理 GTM,标准版 1个月
公共DNS(含HTTPDNS解析),每月1000万次HTTP解析
云解析 DNS,旗舰版 1个月
简介: [Vue]之Jwt的入门和Jwt工具类的使用及Jwt集成spa项目

一,jwt入门

1.1 是什么?

        JWT,全称为 JSON Web Token,是一种用于在网络应用之间传递信息的标准方法。它是基于 JSON 格式定义的一种简洁且自包含的方式,可以安全地在用户和服务之间传输声明信息

1.2 为什么要使用

①简洁性JWT 的格式简洁且体积小,可以方便地在网络请求的头部、参数或者正文中传输

②自包含性:JWT 内部包含了所有的认证信息,因此服务端不需要针对每个请求都去查询数据库或者进行其他的操作来验证请求的合法性

③跨平台支持:由于 JWT 使用的是标准的 JSON 格式,因此在不同平台的应用中都可以方便地使用

JWT的精髓在于:“去中心化”,数据是保存在客户端的

1.3 工作原理

用户通过用户名和密码等方式进行登录认证

服务端验证用户提供的凭据信息,如果验证通过,则在服务端生成一个 JWT

服务端将生成的 JWT 返回给客户端

客户端在每次发送请求时,都需要在请求头部或者其他地方添加生成的 JWT

服务端接收到请求后,验证 JWT 的合法性,如果验证通过,则处理请求;否则,返回未授权的错误信息

1.4 核心组成(三部分)

  • 头部(Header):包含了 JWT 的类型(“typ”)和使用的签名算法(“alg”)
  • 载荷(Payload):是 JWT 实际存放信息的地方,包含了一些声明(claims),例如用户的身份信息、权限等
  • 签名(Signature):由头部和载荷进行签名生成,用于验证 JWT 的合法性

二,jwt的工具类

2.1 JwtUtils:

package com.zking.ssm.jwt;
import java.util.Date;
import java.util.Map;
import java.util.UUID;
import javax.crypto.SecretKey;
import javax.crypto.spec.SecretKeySpec;
import org.apache.commons.codec.binary.Base64;
import io.jsonwebtoken.Claims;
import io.jsonwebtoken.JwtBuilder;
import io.jsonwebtoken.Jwts;
import io.jsonwebtoken.SignatureAlgorithm;
/**
 * JWT验证过滤器:配置顺序 CorsFilte->JwtUtilsr-->StrutsPrepareAndExecuteFilter
 *
 */
public class JwtUtils {
  /**
   * JWT_WEB_TTL:WEBAPP应用中token的有效时间,默认30分钟
   */
  public static final long JWT_WEB_TTL = 30 * 60 * 1000;
  /**
   * 将jwt令牌保存到header中的key
   */
  public static final String JWT_HEADER_KEY = "jwt";
  // 指定签名的时候使用的签名算法,也就是header那部分,jwt已经将这部分内容封装好了。
  private static final SignatureAlgorithm SIGNATURE_ALGORITHM = SignatureAlgorithm.HS256;
  private static final String JWT_SECRET = "f356cdce935c42328ad2001d7e9552a3";// JWT密匙
  private static final SecretKey JWT_KEY;// 使用JWT密匙生成的加密key
  static {
    byte[] encodedKey = Base64.decodeBase64(JWT_SECRET);
    JWT_KEY = new SecretKeySpec(encodedKey, 0, encodedKey.length, "AES");
  }
  private JwtUtils() {
  }
  /**
   * 解密jwt,获得所有声明(包括标准和私有声明)
   * 
   * @param jwt
   * @return
   * @throws Exception
   */
  public static Claims parseJwt(String jwt) {
    Claims claims = Jwts.parser()
        .setSigningKey(JWT_KEY)
        .parseClaimsJws(jwt)
        .getBody();
    return claims;
  }
  /**
   * 创建JWT令牌,签发时间为当前时间
   * 
   * @param claims
   *            创建payload的私有声明(根据特定的业务需要添加,如果要拿这个做验证,一般是需要和jwt的接收方提前沟通好验证方式的)
   * @param ttlMillis
   *            JWT的有效时间(单位毫秒),当前时间+有效时间=过期时间
   * @return jwt令牌
   */
  public static String createJwt(Map<String, Object> claims, 
      long ttlMillis) {
    // 生成JWT的时间,即签发时间 2021-10-30 10:02:00 -> 30 10:32:00
    long nowMillis = System.currentTimeMillis();
    //链式语法:
    // 下面就是在为payload添加各种标准声明和私有声明了
    // 这里其实就是new一个JwtBuilder,设置jwt的body
    JwtBuilder builder = Jwts.builder()
        // 如果有私有声明,一定要先设置这个自己创建的私有的声明,这个是给builder的claim赋值,一旦写在标准的声明赋值之后,就是覆盖了那些标准的声明的
        .setClaims(claims)
        // 设置jti(JWT ID):是JWT的唯一标识,根据业务需要,这个可以设置为一个不重复的值,主要用来作为一次性token,从而回避重放攻击。
        // 可以在未登陆前作为身份标识使用
        .setId(UUID.randomUUID().toString().replace("-", ""))
        // iss(Issuser)签发者,写死
        .setIssuer("zking")
        // iat: jwt的签发时间
        .setIssuedAt(new Date(nowMillis))
        // 代表这个JWT的主体,即它的所有人,这个是一个json格式的字符串,可放数据{"uid":"zs"}。此处没放
        // .setSubject("{}")
        // 设置签名使用的签名算法和签名使用的秘钥
        .signWith(SIGNATURE_ALGORITHM, JWT_KEY)
        // 设置JWT的过期时间
        .setExpiration(new Date(nowMillis + ttlMillis));
    return builder.compact();
  }
  /**
   * 复制jwt,并重新设置签发时间(为当前时间)和失效时间
   * 
   * @param jwt
   *            被复制的jwt令牌
   * @param ttlMillis
   *            jwt的有效时间(单位毫秒),当前时间+有效时间=过期时间
   * @return
   */
  public static String copyJwt(String jwt, Long ttlMillis) {
    //解密JWT,获取所有的声明(私有和标准)
    //old
    Claims claims = parseJwt(jwt);
    // 生成JWT的时间,即签发时间
    long nowMillis = System.currentTimeMillis();
    // 下面就是在为payload添加各种标准声明和私有声明了
    // 这里其实就是new一个JwtBuilder,设置jwt的body
    JwtBuilder builder = Jwts.builder()
        // 如果有私有声明,一定要先设置这个自己创建的私有的声明,这个是给builder的claim赋值,一旦写在标准的声明赋值之后,就是覆盖了那些标准的声明的
        .setClaims(claims)
        // 设置jti(JWT ID):是JWT的唯一标识,根据业务需要,这个可以设置为一个不重复的值,主要用来作为一次性token,从而回避重放攻击。
        // 可以在未登陆前作为身份标识使用
        //.setId(UUID.randomUUID().toString().replace("-", ""))
        // iss(Issuser)签发者,写死
        // .setIssuer("zking")
        // iat: jwt的签发时间
        .setIssuedAt(new Date(nowMillis))
        // 代表这个JWT的主体,即它的所有人,这个是一个json格式的字符串,可放数据{"uid":"zs"}。此处没放
        // .setSubject("{}")
        // 设置签名使用的签名算法和签名使用的秘钥
        .signWith(SIGNATURE_ALGORITHM, JWT_KEY)
        // 设置JWT的过期时间
        .setExpiration(new Date(nowMillis + ttlMillis));
    return builder.compact();
  }
}

该工具类提供了以下几个方法:

      parseJwt(String jwt):解密JWT,获得所有声明。

       参数:jwt - 要解密的JWT令牌。
       返回值:包含所有声明的Claims对象。
createJwt(Map<String, Object> claims, long ttlMillis):创建JWT令牌,签发时间为当前时间。

       参数:claims - 创建payload的私有声明。 ttlMillis - JWT的有效时间(单位毫秒)。
       返回值:生成的JWT令牌。
copyJwt(String jwt, Long ttlMillis):复制JWT,并重新设置签发时间和失效时间。

       参数:jwt - 被复制的JWT令牌。 ttlMillis - JWT的有效时间(单位毫秒)。
       返回值:生成的新的JWT令牌

2.1 生成JWT

package com.zking.ssm.service.impl;
import java.text.SimpleDateFormat;
import java.util.Date;
import java.util.HashMap;
import java.util.Map;
import com.zking.ssm.jwt.JwtUtils;
import io.jsonwebtoken.Claims;
import org.junit.*;
public class JwtDemo {
  private SimpleDateFormat sdf = new SimpleDateFormat("yyyy-MM-dd HH:mm:ss.SSS");
  @Test
  public void test1() {// 生成JWT
    //JWT Token=Header.Payload.Signature
    //头部.载荷.签名
    //Payload=标准声明+私有声明+公有声明
    //定义私有声明
    Map<String, Object> claims = new HashMap<String, Object>();
    claims.put("username", "zss");
    claims.put("age", 18);
      //TTL:Time To Live
    String jwt = JwtUtils.createJwt(claims, JwtUtils.JWT_WEB_TTL);
    System.out.println(jwt);
    //获取Payload(包含标准和私有声明)
    Claims parseJwt = JwtUtils.parseJwt(jwt);
    for (Map.Entry<String, Object> entry : parseJwt.entrySet()) {
      System.out.println(entry.getKey() + "=" + entry.getValue());
    }
    Date d1 = parseJwt.getIssuedAt();
    Date d2 = parseJwt.getExpiration();
    System.out.println("令牌签发时间:" + sdf.format(d1));
    System.out.println("令牌过期时间:" + sdf.format(d2));
  }
  @Test
  public void test2() {// 解析oldJwt
    //io.jsonwebtoken.ExpiredJwtException:JWT过期异常
    //io.jsonwebtoken.SignatureException:签名异常
    //String oldJwt="eyJhbGciOiJIUzI1NiJ9.eyJleHAiOjE1OTA3MTg2NzcsImlhdCI6MTU5MDcxNjg3NywiYWdlIjoxOCwianRpIjoiNDFmZjFiZGFkYzkxNDA3OGE4ZGUyNGRkZDEwYjU4N2IiLCJ1c2VybmFtZSI6InpzcyJ9.DdPvioX6kuhV6lEfD9QAN2eQSk_mO3dYkmDmTQsqa78";
    //eyJhbGciOiJIUzI1NiJ9.eyJleHAiOjE2MzU1NjE3MjcsImlhdCI6MTYzNTU1OTkyNywiYWdlIjoxOCwianRpIjoiN2RlYmIzM2JiZTg3NDBmODgzNDI5Njk0ZWE4NzcyMTgiLCJ1c2VybmFtZSI6InpzcyJ9.dUR-9JUlyRdoYx-506SxXQ3gbHFCv0g5Zm8ZGzK1fzw
    String newJwt="eyJhbGciOiJIUzI1NiJ9.eyJpc3MiOiJ6a2luZyIsImV4cCI6MTY2MjM0Njg3MSwiaWF0IjoxNjYyMzQ1MDcxLCJhZ2UiOjE4LCJqdGkiOiI4YjllNzc3YzFlMDM0MjViYThmMDVjNTFlMTU3NDQ1MiIsInVzZXJuYW1lIjoienNzIn0.UWpJxPxwJ09PKxE2SY5ME41W1Kv3jP5bZGKK-oNUDuM";
    String oldJwt = "eyJhbGciOiJIUzI1NiJ9.eyJleHAiOjE2MzU1NjE3MjcsImlhdCI6MTYzNTU1OTkyNywiYWdlIjoxOCwianRpIjoiN2RlYmIzM2JiZTg3NDBmODgzNDI5Njk0ZWE4NzcyMTgiLCJ1c2VybmFtZSI6InpzcyJ9.dUR-9JUlyRdoYx-506SxXQ3gbHFCv0g5Zm8ZGzK1fzw";
    Claims parseJwt = JwtUtils.parseJwt(newJwt);
    for (Map.Entry<String, Object> entry : parseJwt.entrySet()) {
      System.out.println(entry.getKey() + "=" + entry.getValue());
    }
    Date d1 = parseJwt.getIssuedAt();
    Date d2 = parseJwt.getExpiration();
    System.out.println("令牌签发时间:" + sdf.format(d1));
    System.out.println("令牌过期时间:" + sdf.format(d2));
  }
  @Test
  public void test3() {// 复制jwt,并延时30分钟
    String oldJwt = "eyJhbGciOiJIUzI1NiJ9.eyJpc3MiOiJ6a2luZyIsImV4cCI6MTY2MjM0Njg3MSwiaWF0IjoxNjYyMzQ1MDcxLCJhZ2UiOjE4LCJqdGkiOiI4YjllNzc3YzFlMDM0MjViYThmMDVjNTFlMTU3NDQ1MiIsInVzZXJuYW1lIjoienNzIn0.UWpJxPxwJ09PKxE2SY5ME41W1Kv3jP5bZGKK-oNUDuM";
    //String newJwt = "eyJhbGciOiJIUzI1NiJ9.eyJleHAiOjE2MDU3NTM2NTUsImlhdCI6MTYwNTc1MTg1NSwiYWdlIjoxOCwianRpIjoiYmNmN2Q1MzQ2YjE3NGU2MDk1MmIxYzQ3ZTlmMzQyZjgiLCJ1c2VybmFtZSI6InpzcyJ9.m1Qn84RxgbKCnsvrdbbAnj8l_5Jwovry8En0j4kCxhc";
    //String oldJwt = "eyJhbGciOiJIUzI1NiJ9.eyJleHAiOjE1NjI5MDMzNjAsImlhdCI6MTU2MjkwMTU2MCwiYWdlIjoxOCwianRpIjoiZDVjMzE4Njg0MDcyNDgyZDg1MDE5ODVmMDY3OGQ4NjkiLCJ1c2VybmFtZSI6InpzcyJ9.XDDDRRq5jYq5EdEBHtPm7GcuBz4S0VhDTS1amRCdf48";
    String newJwt = JwtUtils.copyJwt(oldJwt, JwtUtils.JWT_WEB_TTL);
    System.out.println(newJwt);
    Claims parseJwt = JwtUtils.parseJwt(newJwt);
    for (Map.Entry<String, Object> entry : parseJwt.entrySet()) {
      System.out.println(entry.getKey() + "=" + entry.getValue());
    }
    Date d1 = parseJwt.getIssuedAt();
    Date d2 = parseJwt.getExpiration();
    System.out.println("令牌签发时间:" + sdf.format(d1));
    System.out.println("令牌过期时间:" + sdf.format(d2));
  }
  @Test
  public void test4() {// 测试JWT的有效时间
    Map<String, Object> claims = new HashMap<String, Object>();
    claims.put("username", "zss");
    String jwt = JwtUtils.createJwt(claims, 3 * 1000L);
    System.out.println(jwt);
    Claims parseJwt = JwtUtils.parseJwt(jwt);
    Date d1 = parseJwt.getIssuedAt();
    Date d2 = parseJwt.getExpiration();
    System.out.println("令牌签发时间:" + sdf.format(d1));
    System.out.println("令牌过期时间:" + sdf.format(d2));
  }
  @Test
  public void test5() {// 三秒后再解析上面过期时间只有三秒的令牌,因为过期则会报错io.jsonwebtoken.ExpiredJwtException
    //String oldJwt = "eyJhbGciOiJIUzI1NiJ9.eyJleHAiOjE2MzU1NjMzODIsImlhdCI6MTYzNTU2MTU4MiwiYWdlIjoxOCwianRpIjoiN2RlYmIzM2JiZTg3NDBmODgzNDI5Njk0ZWE4NzcyMTgiLCJ1c2VybmFtZSI6InpzcyJ1.F4pZFCjWP6wlq8v_udfhOkNCpErF5QlL7DXJdzXTHqE";
    String oldJwt = "eyJhbGciOiJIUzI1NiJ9.eyJpc3MiOiJ6a2luZyIsImV4cCI6MTY2MjM0Njg3MSwiaWF0IjoxNjYyMzQ1MDcxLCJhZ2UiOjE4LCJqdGkiOiI4YjllNzc3YzFlMDM0MjViYThmMDVjNTFlMTU3NDQ1MiIsInVzZXJuYW1lIjoienNzIn9.UWpJxPxwJ09PKxE2SY5ME41W1Kv3jP5bZGKK-oNUDuM";
    Claims parseJwt = JwtUtils.parseJwt(oldJwt);
    // 过期后解析就报错了,下面代码根本不会执行
    Date d1 = parseJwt.getIssuedAt();
    Date d2 = parseJwt.getExpiration();
    System.out.println("令牌签发时间:" + sdf.format(d1));
    System.out.println("令牌过期时间:" + sdf.format(d2));
  }
}

    用于生成JWT。在该方法中,定义了私有声明(claims),并设置了一些键值对,例如用户名和年龄。然后调用了JwtUtils.createJwt()方法生成JWT,并打印输出。

2.2 解析JWT

用test2()进行解析  

用以上生成的JWT字符串进行解析

@Test
  public void test2() {// 解析oldJwt
    //io.jsonwebtoken.ExpiredJwtException:JWT过期异常
    //io.jsonwebtoken.SignatureException:签名异常
    //String oldJwt="eyJhbGciOiJIUzI1NiJ9.eyJleHAiOjE1OTA3MTg2NzcsImlhdCI6MTU5MDcxNjg3NywiYWdlIjoxOCwianRpIjoiNDFmZjFiZGFkYzkxNDA3OGE4ZGUyNGRkZDEwYjU4N2IiLCJ1c2VybmFtZSI6InpzcyJ9.DdPvioX6kuhV6lEfD9QAN2eQSk_mO3dYkmDmTQsqa78";
    //eyJhbGciOiJIUzI1NiJ9.eyJleHAiOjE2MzU1NjE3MjcsImlhdCI6MTYzNTU1OTkyNywiYWdlIjoxOCwianRpIjoiN2RlYmIzM2JiZTg3NDBmODgzNDI5Njk0ZWE4NzcyMTgiLCJ1c2VybmFtZSI6InpzcyJ9.dUR-9JUlyRdoYx-506SxXQ3gbHFCv0g5Zm8ZGzK1fzw
    String newJwt="eyJhbGciOiJIUzI1NiJ9.eyJpc3MiOiJ6a2luZyIsImV4cCI6MTY2MjM0Njg3MSwiaWF0IjoxNjYyMzQ1MDcxLCJhZ2UiOjE4LCJqdGkiOiI4YjllNzc3YzFlMDM0MjViYThmMDVjNTFlMTU3NDQ1MiIsInVzZXJuYW1lIjoienNzIn0.UWpJxPxwJ09PKxE2SY5ME41W1Kv3jP5bZGKK-oNUDuM";
    String oldJwt = "eyJhbGciOiJIUzI1NiJ9.eyJleHAiOjE2MzU1NjE3MjcsImlhdCI6MTYzNTU1OTkyNywiYWdlIjoxOCwianRpIjoiN2RlYmIzM2JiZTg3NDBmODgzNDI5Njk0ZWE4NzcyMTgiLCJ1c2VybmFtZSI6InpzcyJ9.dUR-9JUlyRdoYx-506SxXQ3gbHFCv0g5Zm8ZGzK1fzw";
    Claims parseJwt = JwtUtils.parseJwt(newJwt);
    for (Map.Entry<String, Object> entry : parseJwt.entrySet()) {
      System.out.println(entry.getKey() + "=" + entry.getValue());
    }
    Date d1 = parseJwt.getIssuedAt();
    Date d2 = parseJwt.getExpiration();
    System.out.println("令牌签发时间:" + sdf.format(d1));
    System.out.println("令牌过期时间:" + sdf.format(d2));
  }

用于解析JWT。在该方法中,使用JwtUtils.parseJwt()方法解析了一个旧的JWT,并将解析结果打印输出。

2.3 复制JWT并延时30分钟

@Test
  public void test3() {// 复制jwt,并延时30分钟
    String oldJwt = "eyJhbGciOiJIUzI1NiJ9.eyJpc3MiOiJ6a2luZyIsImV4cCI6MTY5NzIwMzU4OCwiaWF0IjoxNjk3MjAxNzg4LCJhZ2UiOjE4LCJqdGkiOiI3YzU4YzNkMDk4OTA0YmE5OTMxMGJhZTRmYWFiMjU0NyIsInVzZXJuYW1lIjoienNzIn0.y7RS88Ionnt12k6WNbLm-6-qw61RtpYrYnUUMAyAWZg";
    //String newJwt = "eyJhbGciOiJIUzI1NiJ9.eyJleHAiOjE2MDU3NTM2NTUsImlhdCI6MTYwNTc1MTg1NSwiYWdlIjoxOCwianRpIjoiYmNmN2Q1MzQ2YjE3NGU2MDk1MmIxYzQ3ZTlmMzQyZjgiLCJ1c2VybmFtZSI6InpzcyJ9.m1Qn84RxgbKCnsvrdbbAnj8l_5Jwovry8En0j4kCxhc";
    //String oldJwt = "eyJhbGciOiJIUzI1NiJ9.eyJleHAiOjE1NjI5MDMzNjAsImlhdCI6MTU2MjkwMTU2MCwiYWdlIjoxOCwianRpIjoiZDVjMzE4Njg0MDcyNDgyZDg1MDE5ODVmMDY3OGQ4NjkiLCJ1c2VybmFtZSI6InpzcyJ9.XDDDRRq5jYq5EdEBHtPm7GcuBz4S0VhDTS1amRCdf48";
    String newJwt = JwtUtils.copyJwt(oldJwt, JwtUtils.JWT_WEB_TTL);
    System.out.println(newJwt);
    Claims parseJwt = JwtUtils.parseJwt(newJwt);
    for (Map.Entry<String, Object> entry : parseJwt.entrySet()) {
      System.out.println(entry.getKey() + "=" + entry.getValue());
    }
    Date d1 = parseJwt.getIssuedAt();
    Date d2 = parseJwt.getExpiration();
    System.out.println("令牌签发时间:" + sdf.format(d1));
    System.out.println("令牌过期时间:" + sdf.format(d2));
  }

用于复制JWT并延时30分钟。在该方法中,使用JwtUtils.copyJwt()方法复制了一个旧的JWT,并设置了新的过期时间,并将复制后的JWT打印输出

2.4 测试JWT的有效时间

@Test
  public void test4() {// 测试JWT的有效时间
    Map<String, Object> claims = new HashMap<String, Object>();
    claims.put("username", "zss");
    String jwt = JwtUtils.createJwt(claims, 3 * 1000L);
    System.out.println(jwt);
    Claims parseJwt = JwtUtils.parseJwt(jwt);
    Date d1 = parseJwt.getIssuedAt();
    Date d2 = parseJwt.getExpiration();
    System.out.println("令牌签发时间:" + sdf.format(d1));
    System.out.println("令牌过期时间:" + sdf.format(d2));
  }

用于测试JWT的有效时间。在该方法中,创建了一个带有有效时间为3秒的JWT,并将其打印输出

2.5 模拟过期JWT的解析

@Test
  public void test5() {// 三秒后再解析上面过期时间只有三秒的令牌,因为过期则会报错io.jsonwebtoken.ExpiredJwtException
    //String oldJwt = "eyJhbGciOiJIUzI1NiJ9.eyJleHAiOjE2MzU1NjMzODIsImlhdCI6MTYzNTU2MTU4MiwiYWdlIjoxOCwianRpIjoiN2RlYmIzM2JiZTg3NDBmODgzNDI5Njk0ZWE4NzcyMTgiLCJ1c2VybmFtZSI6InpzcyJ1.F4pZFCjWP6wlq8v_udfhOkNCpErF5QlL7DXJdzXTHqE";
    String oldJwt = "eyJhbGciOiJIUzI1NiJ9.eyJpc3MiOiJ6a2luZyIsImV4cCI6MTY5NzIwMzU4OCwiaWF0IjoxNjk3MjAxNzg4LCJhZ2UiOjE4LCJqdGkiOiI3YzU4YzNkMDk4OTA0YmE5OTMxMGJhZTRmYWFiMjU0NyIsInVzZXJuYW1lIjoienNzIn0.y7RS88Ionnt12k6WNbLm-6-qw61RtpYrYnUUMAyAWZg";
    Claims parseJwt = JwtUtils.parseJwt(oldJwt);
    // 过期后解析就报错了,下面代码根本不会执行
    Date d1 = parseJwt.getIssuedAt();
    Date d2 = parseJwt.getExpiration();
    System.out.println("令牌签发时间:" + sdf.format(d1));
    System.out.println("令牌过期时间:" + sdf.format(d2));
  }
}

用于模拟过期JWT的解析。在该方法中,尝试解析一个过期的JWT,并会抛出io.jsonwebtoken.ExpiredJwtException异常。

三,jwt前后端分离

1.user登录方法,要放开用户信息生成jwt串保存到响应头中的代码

2.关闭jwtfilter中的off开关,代表开启jwt验证

3.crosfilter中要允许jwt使用请求头及响应头,换句话说web.xml要更换配置

后端user

JwtFilter

package com.zking.ssm.jwt;
import java.io.IOException;
import java.util.regex.Matcher;
import java.util.regex.Pattern;
import javax.servlet.Filter;
import javax.servlet.FilterChain;
import javax.servlet.FilterConfig;
import javax.servlet.ServletException;
import javax.servlet.ServletRequest;
import javax.servlet.ServletResponse;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import io.jsonwebtoken.Claims;
/**
 * * JWT验证过滤器,配置顺序 :CorsFilter-->JwtFilter-->struts2中央控制器
 * 
 * @author Administrator
 *
 */
public class JwtFilter implements Filter {
  // 排除的URL,一般为登陆的URL(请改成自己登陆的URL)
  private static String EXCLUDE = "^/user/userLogin?.*$";
  private static Pattern PATTERN = Pattern.compile(EXCLUDE);
  private boolean OFF = false;// true关闭jwt令牌验证功能
  @Override
  public void init(FilterConfig filterConfig) throws ServletException {
  }
  @Override
  public void destroy() {
  }
  @Override
  public void doFilter(ServletRequest request, ServletResponse response, FilterChain chain)
      throws IOException, ServletException {
    HttpServletRequest req = (HttpServletRequest) request;
    HttpServletResponse resp = (HttpServletResponse) response;
    //获取当前请求路径。只有登录的请求路径不进行校验之外,其他的URL请求路径必须进行JWT令牌校验
    //http://localhost:8080/ssh2/bookAction_queryBookPager.action
    //req.getServletPath()==/bookAction_queryBookPager.action
    String path = req.getServletPath();
    if (OFF || isExcludeUrl(path)) {// 登陆直接放行
        chain.doFilter(request, response);
        return;
    }
    // 从客户端请求头中获得令牌并验证
    //token=头.载荷.签名
    String jwt = req.getHeader(JwtUtils.JWT_HEADER_KEY);
    Claims claims = this.validateJwtToken(jwt);
    //在这里请各位大哥大姐从JWT令牌中提取payload中的声明部分
    //从声明部分中获取私有声明
    //获取私有声明中的User对象 -> Modules
    Boolean flag=false;
    if (null == claims) {
      // resp.setCharacterEncoding("UTF-8");
      resp.sendError(403, "JWT令牌已过期或已失效");
      return;
    } else {
      //1.获取已经解析后的payload(私有声明)
      //2.从私有声明中当前用户所对应的权限集合List<String>或者List<Module>
      //3.循环权限(Module[id,url])
      // OK,放行请求 chain.doFilter(request, response);
      // NO,发送错误信息的JSON
      // ObjectMapper mapper=new ObjectMapper()
      // mapper.writeValue(response.getOutputStream(),json)
      String newJwt = JwtUtils.copyJwt(jwt, JwtUtils.JWT_WEB_TTL);
      resp.setHeader(JwtUtils.JWT_HEADER_KEY, newJwt);
      chain.doFilter(request, response);
    }
  }
  /**
   * 验证jwt令牌,验证通过返回声明(包括公有和私有),返回null则表示验证失败
   */
  private Claims validateJwtToken(String jwt) {
    Claims claims = null;
    try {
      if (null != jwt) {
        //该解析方法会验证:1)是否过期 2)签名是否成功
        claims = JwtUtils.parseJwt(jwt);
      }
    } catch (Exception e) {
      e.printStackTrace();
    }
    return claims;
  }
  /**
   * 是否为排除的URL
   * 
   * @param path
   * @return
   */
  private boolean isExcludeUrl(String path) {
    Matcher matcher = PATTERN.matcher(path);
    return matcher.matches();
  }
  // public static void main(String[] args) {
  // String path = "/sys/userAction_doLogin.action?username=zs&password=123";
  // Matcher matcher = PATTERN.matcher(path);
  // boolean b = matcher.matches();
  // System.out.println(b);
  // }
}

运用之前我们就要问到我们的跨域问题了,我们要运用这个跨域问题

CorsFilter

package com.zking.ssm.util;
import java.io.IOException;
import javax.servlet.Filter;
import javax.servlet.FilterChain;
import javax.servlet.FilterConfig;
import javax.servlet.ServletException;
import javax.servlet.ServletRequest;
import javax.servlet.ServletResponse;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
/**
 * 配置tomcat允许跨域访问
 * 
 * @author Administrator
 *
 */
public class CorsFilter implements Filter {
  @Override
  public void init(FilterConfig filterConfig) throws ServletException {
  }
  @Override
  public void doFilter(ServletRequest servletRequest, ServletResponse servletResponse, FilterChain filterChain)
      throws IOException, ServletException {
    HttpServletResponse httpResponse = (HttpServletResponse) servletResponse;
    HttpServletRequest req = (HttpServletRequest) servletRequest;
    // Access-Control-Allow-Origin就是我们需要设置的域名
    // Access-Control-Allow-Headers跨域允许包含的头。
    // Access-Control-Allow-Methods是允许的请求方式
    httpResponse.setHeader("Access-Control-Allow-Origin", "*");// *,任何域名
    httpResponse.setHeader("Access-Control-Allow-Methods", "POST, GET, PUT, DELETE");
    //允许客户端发一个新的请求头jwt
    httpResponse.setHeader("Access-Control-Allow-Headers","responseType,Origin,X-Requested-With, Content-Type, Accept, jwt");
    //允许客户端处理一个新的响应头jwt
    httpResponse.setHeader("Access-Control-Expose-Headers", "jwt,Content-Disposition");
    //httpResponse.setHeader("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept");
    //httpResponse.setHeader("Access-Control-Allow-Methods", "POST, GET, PUT, DELETE");
    // axios的ajax会发两次请求,第一次提交方式为:option,直接返回即可
    if ("OPTIONS".equals(req.getMethod())) {
      return;
    }
    filterChain.doFilter(servletRequest, servletResponse);
  }
  @Override
  public void destroy() {
  }
}

web.xml:

<!--CrosFilter跨域过滤器-->
  <filter>
    <filter-name>corsFilter</filter-name>
    <filter-class>com.zking.ssm.util.CorsFilter</filter-class>
  </filter>
  <filter-mapping>
    <filter-name>corsFilter</filter-name>
    <url-pattern>/*</url-pattern>
  </filter-mapping>

state.js:

export default{
  eduName:'我不是打工人',
   jwt: ''
}

mutations.js:

export default{
  setEduName:(state,payload)=>{
    state.eduName=payload.eduName
  },
  setJwt: (state, payload) => {
      state.jwt = payload.jwt;
    }
}

gettter.js:

export default{
  getEduName:(state)=>{
  return state.eduName;
  },
  getJwt: (state) => {
      return state.jwt;
    }
}

http.js:

// 请求拦截器
axios.interceptors.request.use(function (config) {
  var jwt = window.ss.$store.getters.getJwt
  if (jwt) {
     config.headers['jwt']=jwt
  }
  return config;
}, function (error) {
  return Promise.reject(error);
});
// 响应拦截器
axios.interceptors.response.use(function (response) {
  let jwt = response.headers['jwt'];
  if (jwt) {
    //将响应头中的jwt串放入state.js中
    window.ss.$store.commit('setJwt', {
      jwt: jwt
    })
  }
  return response;
}, function (error) {
  return Promise.reject(error);
});

mian.js

/* eslint-disable no-new */
window.ss=new Vue({
  el: '#app',
  router,
  store, //在main.js中导入store实例
  data(){
    return{
      Bus:new Vue()
    }
  },
  components: { App },
  template: '<App/>'
})

效果图:

目录
相关文章
|
30天前
|
JavaScript 容器
乾坤qiankun框架搭建 主应用为vue3的项目。
乾坤qiankun框架搭建 主应用为vue3的项目。
149 2
|
20天前
|
数据采集 监控 JavaScript
在 Vue 项目中使用预渲染技术
【10月更文挑战第23天】在 Vue 项目中使用预渲染技术是提升 SEO 效果的有效途径之一。通过选择合适的预渲染工具,正确配置和运行预渲染操作,结合其他 SEO 策略,可以实现更好的搜索引擎优化效果。同时,需要不断地监控和优化预渲染效果,以适应不断变化的搜索引擎环境和用户需求。
|
7天前
|
JavaScript 前端开发
如何在 Vue 项目中配置 Tree Shaking?
通过以上针对 Webpack 或 Rollup 的配置方法,就可以在 Vue 项目中有效地启用 Tree Shaking,从而优化项目的打包体积,提高项目的性能和加载速度。在实际配置过程中,需要根据项目的具体情况和需求,对配置进行适当的调整和优化。
|
14天前
|
安全 Java API
【三方服务集成】最新版 | 阿里云短信服务SMS使用教程(包含支持单双参数模板的工具类,拿来即用!)
阿里云短信服务提供API/SDK和控制台调用方式,支持验证码、通知、推广等短信类型。需先注册阿里云账号并实名认证,然后在短信服务控制台申请资质、签名和模板,并创建AccessKey。最后通过Maven引入依赖,使用工具类发送短信验证码。
【三方服务集成】最新版 | 阿里云短信服务SMS使用教程(包含支持单双参数模板的工具类,拿来即用!)
|
24天前
|
JavaScript
如何在 Vue 项目中选择合适的模块格式
【10月更文挑战第20天】选择合适的模块格式需要综合考虑多个因素,没有一种绝对正确的选择。需要根据项目的具体情况进行权衡和分析。在实际选择过程中,要保持灵活性,根据项目的发展和变化适时调整模块格式。
20 7
|
19天前
Vue3 项目的 setup 函数
【10月更文挑战第23天】setup` 函数是 Vue3 中非常重要的一个概念,掌握它的使用方法对于开发高效、灵活的 Vue3 组件至关重要。通过不断的实践和探索,你将能够更好地利用 `setup` 函数来构建优秀的 Vue3 项目。
|
24天前
|
JavaScript 前端开发 编译器
在 Vue 项目中使用 ES 模块格式的优点
【10月更文挑战第20天】在 Vue 项目中使用 ES 模块格式具有众多优点,这些优点共同作用,使得项目能够更高效、更可靠地开发和运行。当然,在实际应用中,还需要根据项目的具体情况和需求进行合理的选择和配置。
27 6
|
19天前
|
JavaScript 测试技术 UED
解决 Vue 项目中 Tree shaking 无法去除某些模块
【10月更文挑战第23天】解决 Vue 项目中 Tree shaking 无法去除某些模块的问题需要综合考虑多种因素,通过仔细分析、排查和优化,逐步提高 Tree shaking 的效果,为项目带来更好的性能和用户体验。同时,持续关注和学习相关技术的发展,不断探索新的解决方案,以适应不断变化的项目需求。
|
29天前
|
缓存 JavaScript 前端开发
《基础篇第4章:vue2基础》:使用vue脚手架创建项目
《基础篇第4章:vue2基础》:使用vue脚手架创建项目
65 3
|
30天前
|
存储 JavaScript 数据库
ToB项目身份认证AD集成(一):基于目录的用户管理、LDAP和Active Directory简述
本文介绍了基于目录的用户管理及其在企业中的应用,重点解析了LDAP协议和Active Directory服务的概念、关系及差异。通过具体的账号密码认证时序图,展示了利用LDAP协议与AD域进行用户认证的过程。总结了目录服务在现代网络环境中的重要性,并预告了后续的深入文章。