Jwt 介绍

目录

一，jwt出现的原因及工作原理

二，jwt工具类介绍，三种场景 

JwtFilter:

   Http.js:

---

一，jwt出现的原因及工作原理

1. JWT是什么
   JSON Web Token (JWT)，它是目前最流行的跨域身份验证解决方案
2. 为什么使用JWT
   JWT的精髓在于：“去中心化”，数据是保存在客户端的。

3. JWT的工作原理
   1. 是在服务器身份验证之后，将生成一个JSON对象并将其发送回用户，示例如下：
      {"UserName": "Chongchong","Role": "Admin","Expire": "2018-08-08 20:15:56"}

   2. 之后，当用户与服务器通信时，客户在请求中发回JSON对象
    
   3. 为了防止用户篡改数据，服务器将在生成对象时添加签名，并对发回的数据进行验证

二，jwt工具类介绍，三种场景 

JwtFilter:

package com.zking.vue.util;
 
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 = "^/vue/userAction_login\\.action?.*$";
 
	private static Pattern PATTERN = Pattern.compile(EXCLUDE);
 
	private boolean OFF = true;// 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);
	// }
 
}

   Http.js:

/**
 * vue项目对axios的全局配置
 */
import axios from 'axios'
import qs from 'qs'
 
//引入action模块，并添加至axios的类属性urls上
import action from '@/api/action'
axios.urls = action
 
// axios默认配置
axios.defaults.timeout = 10000; // 超时时间
// axios.defaults.baseURL = 'http://localhost:8080/j2ee15'; // 默认地址
axios.defaults.baseURL = action.SERVER;
 
//整理数据
// 只适用于 POST,PUT,PATCH，transformRequest` 允许在向服务器发送前，修改请求数据
axios.defaults.transformRequest = function(data) {
	data = qs.stringify(data);
	return data;
};
 
 
// 请求拦截器
axios.interceptors.request.use(function(config) {
	var jwt = window.vm.$store.getters.getJwt;
	config.headers['jwt'] = jwt;
	return config;
}, function(error) {
	return Promise.reject(error);
});
 
// 响应拦截器
axios.interceptors.response.use(function(response) {
	debugger;
	var jwt = response.headers['jwt'];
	if(jwt){
		window.vm.$store.commit('setJwt',{jwt:jwt});
	}
	return response;
}, function(error) {
	return Promise.reject(error);
});
 
 
 
export default axios;

mutations.js:

export default {
    setResName:(state,payload)=>{
  //  state对象就对应了state.js中的对象
  //  payload载荷 对应的 传递的 json对象参数{name:zs,age:24}
    state.resName=payload.resName;
  },
  setJwt:(state,payload)=>{
    state.jwt=payload.jwt;
  }
}

state.js:

export default {
  resName:'阿猪餐馆',
  jwt:''
}

getters.js:

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

main.js:

// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
//开发环境下才会引入mockjs
//process.env.MOCK为false，那么require('@/mock')就不执行；
// process.env.MOCK在生产环境下为false
// process.env.MOCK && require('@/mock')
import ElementUI from 'element-ui' // 新添加 1
import 'element-ui/lib/theme-chalk/index.css' // 新添加 2 ，避免后期打包样式
import App from './App'
import router from './router'
import axios from '@/api/http'  //vue项目对axios的全局配置
// import axios from 'axios'
import VueAxios from 'vue-axios'
import store from './store'
 
Vue.use(ElementUI);//新添加 3
Vue.use(VueAxios,axios);
Vue.config.productionTip = false
 
/* eslint-disable no-new */
window.vm = new Vue({
  el: '#app',
  router,
  store,
  data(){
    return {
      //在vue根实例中定一个变量，这个变量就是vue实例，它总线
      //props this.$emit
      Bus:new Vue({})
    }
  },
  components: { App },
  template: '<App/>'
})