前后端分离式开发 jwt的使用

目录

jwt令牌的使用

1.1 什么是JWT

1.2 为什么使用JWT

1.3 JWT结构

1.4 验证过程

2. JWT示例

2.1 后台程序

2.2 前台加入jwt令牌功能

3.令牌数据处理

---

jwt令牌的使用

1.1 什么是JWT

Json web token (JWT), 是为了在网络应用环境间传递声明而执行的一种基于JSON的开放标准（(RFC 7519).该token被设计为紧凑且安全的，特别适用于分布式站点的单点登录（SSO）场景。JWT的声明一般被用来在身份提供者和服务提供者间传递被认证的用户身份信息，以便于从资源服务器获取资源，也可以增加一些额外的其它业务逻辑所必须的声明信息，该token也可直接被用于认证，也可被加密。

JSON Web Token（JWT）是目前最流行的跨域身份验证解决方案

1.2 为什么使用JWT

传统的intenet服务的认证是通过session进行的，当用户通过了安全认证后，则在服务端的session对象中保存该用户的认证信息，这样该用户对服务的访问被认为是安全的。这种模式的最大问题是没有分布式架构，不方便进行横向扩展，这种模式只适合于单体应用模式。如果需要进行服务集群则需要处理好共享session的问题。 如果一个庞大的系统需要按服务分解为多个独立的服务，使用分布式架构，则这种方式更难处理。使用jwt可以方便的处理上面提到的问题。

1.3 JWT结构

JWT头： JWT头部分是一个描述JWT元数据的JSON对象，通常如下所示。{"alg": "HS256","typ": "JWT"}。

有效载荷： 有效载荷部分，是JWT的主体内容部分，也是一个JSON对象，包含需要传递的数据。这些声明被JWT标准称为claims。 例如：{"sub":"123","name":"Tom","admin":true}，sub代表这个token的所有人，存储的是所有人的ID；name表示这个所有人的名字；admin表示所有人是否管理员的角色。当后面对JWT进行验证的时候，这些claim都能发挥特定的作用。 根据JWT的标准，这些claims可以分为以下三种类型： A. Reserved claims(保留) 它的含义就像是编程语言的保留字一样，属于JWT标准里面规定的一些claim。JWT标准里面定义好的claim有： iss (issuer)：签发人 exp (expiration time)：过期时间 sub (subject)：主题 aud (audience)：受众 nbf (Not Before)：生效时间 iat (Issued At)：签发时间 jti (JWT ID)：编号

B. Public claims，略（不重要）

C. Private claims(私有) 这个指的就是自定义的claim，比如前面那个示例中的admin和name都属于自定的claim。这些claim跟JWT标准规定的claim区别在于：JWT规定的claim，JWT的接收方在拿到JWT之后，都知道怎么对这些标准的claim进行验证；而private claims不会验证，除非明确告诉接收方要对这些claim进行验证以及规则才行。 按照JWT标准的说明：保留的claims都是可选的，在生成payload不强制用上面的那些claim，你可以完全按照自己的想法来定义payload的结构，不过这样搞根本没必要：第一是，如果把JWT用于认证， 那么JWT标准内规定的几个claim就足够用了，甚至只需要其中一两个就可以了，假如想往JWT里多存一些用户业务信息，比如角色和用户名等，这倒是用自定义的claim来添加；第二是，JWT标准里面针对它自己规定的claim都提供了有详细的验证规则描述，每个实现库都会参照这个描述来提供JWT的验证实现，所以如果是自定义的claim名称，那么你用到的实现库就不会主动去验证这些claim。

signature： 签名的作用是防篡改。签名是把header和payload对应的json结构进行base64url编码之后得到的两个串用英文句点号拼接起来，然后根据header里面alg指定的签名算法生成出来的。算法不同，签名结果不同。以alg: HS256为例来说明前面的签名如何来得到。照前面alg可用值的说明，HS256其实包含的是两种算法：HMAC算法和SHA256算法，前者用于生成摘要，后者用于对摘要进行数字签名。这两个算法也可以用HMACSHA256来统称

JWT实际结构示例： eyJhbGciOiJIUzI1NiJ9. eyJzdWIiOiJ7fSIsImlzcyI6InpraW5nIiwiZXhwIjoxNTYyODUwMjM3LCJpYXQiOjE1NjI4NDg0MzcsImp0aSI6ImM5OWEyMzRmMDc4NzQyZWE4YjlmYThlYmYzY2VhNjBlIiwidXNlcm5hbWUiOiJ6c3MifQ. WUfqhFTeGzUZCpCfz5eeEpBXBZ8-lYg1htp-t7wD3I4

JSON Web Tokens - jwt.io 可以解析jwt发过来的命令数据

1.4 验证过程

客户端接收服务器返回的JWT，将其存储在Cookie或localStorage中，此后在于服务器的交互中都携带者JWT信息，它验证的方法其实很简单，只要把header做base64url解码，就能知道JWT用的什么算法做的签名，然后用这个算法，再次用同样的逻辑对header和payload做一次签名，并比较这个签名是否与JWT本身包含的第三个部分的串是否完全相同，只要不同，就可以认为这个JWT是一个被篡改过的串。

2. JWT示例

2.1 后台程序

需要导入架包 使用maven 导入

 <!-- jwt 令牌需要架包  -->
    <dependency>
      <groupId>io.jsonwebtoken</groupId>
      <artifactId>jjwt</artifactId>
      <version>0.9.1</version>
    </dependency>
    <dependency>
      <groupId>com.auth0</groupId>
      <artifactId>java-jwt</artifactId>
      <version>3.10.3</version>
    </dependency>

​

1）（CorsFilter.java，JwtFilter.java，JwtUtils.java）拷入项目的util目录下（可以根据项目设置的目录结构调整）。

CorsFilter 作用域过滤器

package com.zking.vueserver.utils;
​
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");
        httpResponse.setHeader("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept,jwt");
        //允许客户端，处理一个新的响应头jwt
        httpResponse.setHeader("Access-Control-Expose-Headers", "jwt");
        
        // axios的ajax会发两次请求，第一次提交方式为：option，直接返回即可
        if ("OPTIONS".equals(req.getMethod())) {
            return;
        }
        
        filterChain.doFilter(servletRequest, servletResponse);
    }
​
    @Override
    public void destroy() {
​
    }
}

JwtFilter 过滤器 发现没有jwt命令直接请求失效

package com.zking.vueserver.utils;
​
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验证过滤器，配置顺序 ：CorsFilte-->JwtFilter-->struts2中央控制器
 * 
 * @author Administrator
 *
 */
public class JwtFilter implements Filter {
​
    // 排除的URL，一般为登陆的URL(请改成自己登陆的URL)
    private static String EXCLUDE = "^/login";
​
    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;
        String path = req.getServletPath();
        if (OFF || isExcludeUrl(path)) {// 登陆直接放行
            chain.doFilter(request, response);
            return;
        }
​
        // 从客户端请求头中获得令牌并验证
        String jwt = req.getHeader(JwtUtils.JWT_HEADER_KEY);
        Claims claims = this.validateJwtToken(jwt);
        if (null == claims) {
            // resp.setCharacterEncoding("UTF-8");
            resp.sendError(403, "JWT令牌已过期或已失效");
            return;
        } else {
            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) {
                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);
    // }
​
}
​

JwtUtils 工具类

package com.zking.vueserver.utils;
​
import java.util.Base64;
import java.util.Date;
import java.util.Map;
import java.util.UUID;
​
import javax.crypto.SecretKey;
import javax.crypto.spec.SecretKeySpec;
​
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那部分，jjwt已经将这部分内容封装好了。
    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.getDecoder().decode(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的时间，即签发时间
        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) {
        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();
    }
    
}
​

程序的解释详见代码中的注释

3）在web.xml中配置JwtFilter过滤器

    <!-- 处理跨域请求 通过  -->
   <filter>
        <filter-name>CorsFilter</filter-name>
        <filter-class>com.zking.vueserver.utils.CorsFilter</filter-class>
    </filter>
    <filter-mapping>
        <filter-name>CorsFilter</filter-name>
        <url-pattern>/*</url-pattern>
    </filter-mapping>
​
    <!-- jwt -->
        <filter>
            <filter-name>JwtFilter</filter-name>
            <filter-class>com.zking.vueserver.utils.JwtFilter</filter-class>
        </filter>
        <filter-mapping>
            <filter-name>JwtFilter</filter-name>
            <url-pattern>/*</url-pattern>
        </filter-mapping>

4）在用户登录验证成功后，需要为该用户生成jwt令牌，具体实现可参考UserAction.java

  @RequestMapping(path = "/login")
    @ResponseBody
    //接受json post请求 需要注解RequestBody
    public Object login( User us, HttpServletResponse response) {
        RetrunData re = null;
        if ("admin".equals(us.getUserName()) && "123".equals(us.getPassWord())) {
​
         //认证成功，则发放令牌
            Map<String,Object> param = new HashMap<>();
            param.put("user", us);
            String jwt = JwtUtils.createJwt(param, JwtUtils.JWT_WEB_TTL);
            response.addHeader("jwt", jwt);
​
​
            re = new RetrunData(1, "登录成功", us);
        } else {
            re = new RetrunData(-1, "登录失败", "ns");
        }
​
        return re;
    }

5）测试后台的验证服务，确定在验证通过的前提下可以正确的生成jwt令牌。

2.2 前台加入jwt令牌功能

没有用vuex的 先实现vuex 与 axios

axios插件 实现

使用vue-cli搭建spa项目-登录界面与后台交互_嘴强程序员的博客-优快云博客

vuex 组件通讯的实现 （传递参数）

vue组件间通讯（传递参数）_嘴强程序员的博客-优快云博客

1） 在store/state.js中加入jwt变量

//存放全局参数的容器，组件可以通过state.js获取全局参数
const state = {
  LeftAsideState: 'open',
  PersonName:'张飞',
  
  //存放jwt令牌
  jwt:null
}
​
export default state

2）在store/mutations.js中加入设置jwt方法

//设置JWT令牌
  setJwtToken: (state, payload) => {
    state.jwt = payload.jwt;
  }

3）在store/getters.js中加入获取jwt的方法

 //获取jwt令牌
  getJwtToken: function(state) {
    return state.jwt;
  }

4）修改main.js应用入口

//将vue实例赋给window.vm属性，以便于在http.js的响应拦截器和请求拦截器中获取vue实例
window.vm = new Vue({
  el: '#app',
  router,
  store,
  components: {App},
  template: '<App/>'
})

5）完善api/http.js中的请求拦截器和响应拦截器

// 请求拦截器
axios.interceptors.request.use(function(config) {
  //获取store中的jwt令牌，如果正常获取，将其放入请求头，
  //在调用后台服务时，服务会通过过滤器验证jwt令牌的有效性
  //如果没有令牌或令牌无效则拒绝服务。
  let jwt = window.vm.$store.getters.getJwtToken;
  if(jwt) {
    config.headers['jwt'] = jwt;
  }
  return config;
}, function(error) {
  return Promise.reject(error);
});
​
// 响应拦截器
axios.interceptors.response.use(function(response) {
  //获取响应头中的jwt令牌数据（认证服务将生成的令牌放入header的jwt属性中）
  //如果获取到jwt令牌，在保存到store中，以后发送请求时需要将令牌放入请求头
  let jwt = response.headers['jwt'];
  if(jwt) {
      window.vm.$store.commit('setJwtToken',{jwt:jwt});
  }
  return response;
}, function(error) {
  return Promise.reject(error);
});

完毕，测试 。。。。

3.令牌数据处理

 

 

我们登录后 获取vuex中报错的jwt令牌

 

解析前准备关闭 前端服务 下在插件

npm install jsonwebtoken -S

​​​​​​​

 

启动项目

动态引入插件

var jwt = require("jsonwebtoken");

获取 保存的jwt命令 然后使用插件解析获取 令牌中的数据

​
     

 //解析 jwt 
      var jwt = require("jsonwebtoken");
      let tmp2 = this.$store.getters.getJwtToken;
      console.log("无解析前--",tmp2)
       console.log(jwt.decode(tmp2).user);
​​​​​​​