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对象JWT

3. 为了防止用户篡改数据，服务器将在生成对象时添加签名，并对发回的数据进行验证

4. JWT组成

一个JWT实际上就是一个字符串，它由三部分组成：头部(Header)、载荷(Payload)与签名(signature)
JWT结构原理图：见资料“JWT的数据结构.jpg”
JWT实际结构：eyJhbGciOiJIUzI1NiJ9.
eyJzdWIiOiJ7fSIsImlzcyI6InpraW5nIiwiZXhwIjoxNTYyODUwMjM3LCJpYXQiOjE1NjI4NDg0MzcsImp0aSI6ImM5OWEyMzRmMDc4NzQyZWE4YjlmYThlYmYzY2VhNjBlIiwidXNlcm5hbWUiOiJ6c3MifQ.
WUfqhFTeGzUZCpCfz5eeEpBXBZ8-lYg1htp-t7wD3I4

它是一个很长的字符串，中间用点（.）分隔成三个部分。注意，JWT 内部是没有换行的，这里只是为了便于展示，将它写成了几行。
写成一行，就是下面的样子：Header.Payload.Signature

即：头部（headr）.载荷（payload）.签名（Signature）

4.1 Header

{"typ":"JWT","alg":"HS256"}
这个json中的typ属性，用来标识整个token字符串是一个JWT字符串；它的alg属性，用来说明这个JWT签发的时候所使用的签名和摘要算法
typ跟alg属性的全称其实是type跟algorithm，分别是类型跟算法的意思。之所以都用三个字母来表示，也是基于JWT最终字串大小的考虑，
同时也是跟JWT这个名称保持一致，这样就都是三个字符了…typ跟alg是JWT中标准中规定的属性名称

4.2 Payload(负荷)

{"sub":"123","name":"Tom","admin":true}
payload用来承载要传递的数据，它的json结构实际上是对JWT要传递的数据的一组声明，这些声明被JWT标准称为claims，
它的一个“属性值对”其实就是一个claim(要求)，
每一个claim的都代表特定的含义和作用。

注1：英文“claim”就是要求的意思
注2：如上面结构中的sub代表这个token的所有人，存储的是所有人的ID；name表示这个所有人的名字；admin表示所有人是否管理员的角色。
当后面对JWT进行验证的时候，这些claim都能发挥特定的作用
注3：根据JWT的标准，这些claims可以分为以下三种类型：
A. Reserved claims(保留)
它的含义就像是编程语言的保留字一样，属于JWT标准里面规定的一些claim。JWT标准里面定义好的claim有：
iss(Issuser)：代表这个JWT的签发主体；
sub(Subject)：代表这个JWT的主体，即它的所有人；
aud(Audience)：代表这个JWT的接收对象；
exp(Expiration time)：是一个时间戳，代表这个JWT的过期时间；
nbf(Not Before)：是一个时间戳，代表这个JWT生效的开始时间，意味着在这个时间之前验证JWT是会失败的；
iat(Issued at)：是一个时间戳，代表这个JWT的签发时间；
jti(JWT ID)：是JWT的唯一标识。

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

4.3 signature

签名是把header和payload对应的json结构进行base64url编码之后得到的两个串用英文句点号拼接起来，然后根据header里面alg指定的签名算法生成出来的。
算法不同，签名结果不同。以alg: HS256为例来说明前面的签名如何来得到。

按照前面alg可用值的说明，HS256其实包含的是两种算法：HMAC算法和SHA256算法，前者用于生成摘要，后者用于对摘要进行数字签名。这两个算法也可以用HMACSHA256来统称

5. JWT的验证过程

它验证的方法其实很简单，只要把header做base64url解码，就能知道JWT用的什么算法做的签名，然后用这个算法，再次用同样的逻辑对header和payload做一次签名，
并比较这个签名是否与JWT本身包含的第三个部分的串是否完全相同，只要不同，就可以认为这个JWT是一个被篡改过的串，自然就属于验证失败了。
接收方生成签名的时候必须使用跟JWT发送方相同的密钥

注1：在验证一个JWT的时候，签名认证是每个实现库都会自动做的，但是payload的认证是由使用者来决定的。因为JWT里面可能会包含一个自定义claim，
所以它不会自动去验证这些claim，以jjwt-0.7.0.jar为例：
A 如果签名认证失败会抛出如下的异常：
io.jsonwebtoken.SignatureException: JWT signature does not match locally computed signature. JWT validity cannot be asserted and should not be trusted.
即签名错误，JWT的签名与本地计算机的签名不匹配

B JWT过期异常
io.jsonwebtoken.ExpiredJwtException: JWT expired at 2017-06-13T11:55:56Z. Current time: 2017-06-13T11:55:57Z, a difference of 1608 milliseconds. Allowed

注2：认证失败，返回401 Unauthorized响应

注3：认证服务作为一个Middleware HOOK 对请求进行拦截，首先在cookie中查找Token信息，如果没有找到，则在HTTP Authorization Head中查找

6. JWT令牌刷新思路

6.1 登陆成功后，将生成的JWT令牌通过响应头返回给客户端

userAction

package com.zking.vue.action;import java.io.IOException;
import java.util.HashMap;
import java.util.List;
import java.util.Map;import javax.servlet.ServletException;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;import com.fasterxml.jackson.databind.ObjectMapper;
import com.zking.mvc.framework.DispatcherAction;
import com.zking.mvc.framework.ModelDriver;
import com.zking.vue.dao.UserDao;
import com.zking.vue.entity.User;
import com.zking.vue.jwt.JwtUtils;public class UserAction extends DispatcherAction implements ModelDriver<User> {private User user=new User();private ObjectMapper mapper=new ObjectMapper();private UserDao ud=new UserDao();@Overridepublic User getModel() {return user;}public String userLogin(HttpServletRequest req,HttpServletResponse resp) throws ServletException,IOException{Map<String,Object> json=new HashMap<String,Object>();List<User> sa=ud.querydl(user);if(user.getPassword().equals(sa.get(0).getPassword())&&user.getUsername().equals("admin")) {json.put("code","1");json.put("msg", "用户登录成功");//生成JWT，并设置到response响应头中String jwt=JwtUtils.createJwt(json, JwtUtils.JWT_WEB_TTL);resp.setHeader(JwtUtils.JWT_HEADER_KEY, jwt);}else {json.put("code", "-1");json.put("msg", "用户名或密码错误");}mapper.writeValue(resp.getOutputStream(),json);return null;}
}

corsfilter

package com.zking.vue.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 {@Overridepublic void init(FilterConfig filterConfig) throws ServletException {}// @Override// public void doFilter(ServletRequest servletRequest, ServletResponse// servletResponse, FilterChain filterChain)// throws IOException, ServletException {// HttpServletResponse httpResponse = (HttpServletResponse) servletResponse;//// // Access-Control-Allow-Origin就是我们需要设置的域名// // Access-Control-Allow-Headers跨域允许包含的头。// // Access-Control-Allow-Methods是允许的请求方式// httpResponse.addHeader("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");//// // 允许请求头Token// httpResponse.setHeader("Access-Control-Allow-Headers",// "Origin,X-Requested-With, Content-Type, Accept, Token");// HttpServletRequest req = (HttpServletRequest) servletRequest;// System.out.println("Token=" + req.getHeader("Token"));// if("OPTIONS".equals(req.getMethod())) {// return;// }////// filterChain.doFilter(servletRequest, servletResponse);// }@Overridepublic void doFilter(ServletRequest servletRequest, ServletResponse servletResponse, FilterChain filterChain)throws IOException, ServletException {HttpServletResponse resp = (HttpServletResponse) servletResponse;HttpServletRequest req = (HttpServletRequest) servletRequest;// Access-Control-Allow-Origin就是我们需要设置的域名// Access-Control-Allow-Headers跨域允许包含的头。// Access-Control-Allow-Methods是允许的请求方式resp.setHeader("Access-Control-Allow-Origin", "*");// *,任何域名resp.setHeader("Access-Control-Allow-Methods", "POST, GET, PUT, DELETE");// resp.setHeader("Access-Control-Allow-Headers", "Origin,X-Requested-With,// Content-Type, Accept");// 允许客户端，发一个新的请求头jwtresp.setHeader("Access-Control-Allow-Headers", "Origin,X-Requested-With, Content-Type, Accept, jwt");// 允许客户端，处理一个新的响应头jwtresp.setHeader("Access-Control-Expose-Headers", "jwt");// String sss = resp.getHeader("Access-Control-Expose-Headers");// System.out.println("sss=" + sss);// 允许请求头Token// httpResponse.setHeader("Access-Control-Allow-Headers","Origin,X-Requested-With,// Content-Type, Accept, Token");// System.out.println("Token=" + req.getHeader("Token"));if ("OPTIONS".equals(req.getMethod())) {// axios的ajax会发两次请求，第一次提交方式为：option，直接返回即可return;}filterChain.doFilter(servletRequest, servletResponse);}@Overridepublic void destroy() {}
}

jwtdemo

package com.zking.vue.jwt;import java.text.SimpleDateFormat;
import java.util.Date;
import java.util.HashMap;
import java.util.Map;import org.junit.Test;import io.jsonwebtoken.Claims;public class JwtDemo {private SimpleDateFormat sdf = new SimpleDateFormat("yyyy-MM-dd HH:mm:ss.SSS");@Testpublic void test1() {// 生成JWT//私有申明Map<String, Object> claims = new HashMap<String, Object>();claims.put("username", "zss");claims.put("age", 18);//生成jwt令牌=头部+载荷String jwt = JwtUtils.createJwt(claims, JwtUtils.JWT_WEB_TTL);System.out.println(jwt);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));}@Testpublic void test2() {// 解析oldJwt
//      String oldJwt = "eyJhbGciOiJIUzI1NiJ9.eyJleHAiOjE1NjI5MDMzNjAsImlhdCI6MTU2MjkwMTU2MCwiYWdlIjoxOCwianRpIjoiZDVjMzE4Njg0MDcyNDgyZDg1MDE5ODVmMDY3OGQ4NjkiLCJ1c2VybmFtZSI6InpzcyJ9.XDDDRRq5jYq5EdEBHtPm7GcuBz4S0VhDTS1amRCdf48";String newJwt="eyJhbGciOiJIUzI1NiJ9.eyJpc3MiOiJwZW5nIiwiZXhwIjoxNjUyNzA2NzY3LCJpYXQiOjE2NTI3MDQ5NjcsImFnZSI6MTgsImp0aSI6IjI0OTk4ZjU2Y2RjNjQ0NmI5YjY2MDZiYWI1Njg3NWU0IiwidXNlcm5hbWUiOiJ6c3MifQ.fRm9AvcdQ6YnwSgocQ-UEYowset2W87KQHnOOgNqSsk";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));}@Testpublic void test3() {// 复制jwt，并延时30秒
//      String oldJwt = "eyJhbGciOiJIUzI1NiJ9.eyJleHAiOjE1NjI5MDMzNjAsImlhdCI6MTU2MjkwMTU2MCwiYWdlIjoxOCwianRpIjoiZDVjMzE4Njg0MDcyNDgyZDg1MDE5ODVmMDY3OGQ4NjkiLCJ1c2VybmFtZSI6InpzcyJ9.XDDDRRq5jYq5EdEBHtPm7GcuBz4S0VhDTS1amRCdf48";String newJwt="eyJhbGciOiJIUzI1NiJ9.eyJpc3MiOiJwZW5nIiwiZXhwIjoxNjUyNzA2NzY3LCJpYXQiOjE2NTI3MDQ5NjcsImFnZSI6MTgsImp0aSI6IjI0OTk4ZjU2Y2RjNjQ0NmI5YjY2MDZiYWI1Njg3NWU0IiwidXNlcm5hbWUiOiJ6c3MifQ.fRm9AvcdQ6YnwSgocQ-UEYowset2W87KQHnOOgNqSsk";              String jwt = JwtUtils.copyJwt(newJwt, JwtUtils.JWT_WEB_TTL);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));}@Testpublic 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));}@Testpublic void test5() {// 三秒后再解析上面过期时间只有三秒的令牌，因为过期则会报错io.jsonwebtoken.ExpiredJwtException
//      String oldJwt = "eyJhbGciOiJIUzI1NiJ9.eyJleHAiOjE1NjI4NTMzMzAsImlhdCI6MTU2Mjg1MzMyNywidXNlcm5hbWUiOiJ6c3MifQ.e098Vj9KBlZfC12QSDhI5lUGRLbNwb27lrYYSL6JwrQ";String newJwt="eyJhbGciOiJIUzI1NiJ9.eyJpc3MiOiJwZW5nIiwiZXhwIjoxNjUyNzA2NzY3LCJpYXQiOjE2NTI3MDQ5NjcsImFnZSI6MTgsImp0aSI6IjI0OTk4ZjU2Y2RjNjQ0NmI5YjY2MDZiYWI1Njg3NWU0IiwidXNlcm5hbWUiOiJ6c3MifQ.fRm9AvcdQ6YnwSgocQ-UEYowset2W87KQHnOOgNqSsk";Claims parseJwt = JwtUtils.parseJwt(newJwt);// 过期后解析就报错了，下面代码根本不会执行Date d1 = parseJwt.getIssuedAt();Date d2 = parseJwt.getExpiration();System.out.println("令牌签发时间：" + sdf.format(d1));System.out.println("令牌过期时间：" + sdf.format(d2));}
}

jwtutils

package com.zking.vue.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那部分，jjwt已经将这部分内容封装好了。private static final SignatureAlgorithm SIGNATURE_ALGORITHM = SignatureAlgorithm.HS256;private static final String JWT_SECRET = "f356cdce935c42328ad2001d7e9552a3";// JWT密匙private static final SecretKey JWT_KEY;// 使用JWT密匙生成的加密keystatic {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的时间，即签发时间long nowMillis = System.currentTimeMillis();// 下面就是在为payload添加各种标准声明和私有声明了// 这里其实就是new一个JwtBuilder，设置jwt的bodyJwtBuilder builder = Jwts.builder()// 如果有私有声明，一定要先设置这个自己创建的私有的声明，这个是给builder的claim赋值，一旦写在标准的声明赋值之后，就是覆盖了那些标准的声明的.setClaims(claims)// 设置jti(JWT ID)：是JWT的唯一标识，根据业务需要，这个可以设置为一个不重复的值，主要用来作为一次性token,从而回避重放攻击。// 可以在未登陆前作为身份标识使用.setId(UUID.randomUUID().toString().replace("-", ""))// iss(Issuser)签发者，写死// .setIssuer("zking").setIssuer("peng") // 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的bodyJwtBuilder 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();}
}

6.2 WEB APP项目每次请求后台数据时(将JWT令牌从请求头中带过来)，
验证通过，刷新JWT，并保存在响应头返回给客户端，有效时间30分钟
JwtFilter

注1：修改CorsFilter添加允许的新的请求头“jwt”
注2：原来在默认的请求上，浏览器只能访问以下默认的响应头
Cache-Control
Content-Language
Content-Type
Expires
Last-Modified
Pragma
如果想让浏览器能访问到其他的响应头的话需要在服务器上设置 Access-Control-Expose-Headers
Access-Control-Expose-Headers : 'jwt'

// CorsFilter 允许客户端，发一个新的请求头jwt
resp.setHeader("Access-Control-Allow-Headers", "Origin,X-Requested-With, Content-Type, Accept, jwt");

注3：axios从响应头获得jwt令牌并保存到vuex
这里有个问题如何获得项目中Vue的根实例，解决方案：修改main.js
window.vm = new Vue({...});

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) {//每一次向服务端发送请求，先由请求拦截器在此处获取vuex中的令牌并存入request请求头带入后端（登录请求除外）console.log(config);//先从vuex中获取jwt令牌let jwt = window.vm.$store.getters.getjwt;if(null!=jwt){config.headers['jwt'] = jwt;}return config;
}, function(error) {return Promise.reject(error);
});// 响应拦截器
axios.interceptors.response.use(function(response) {//从服务器端回传过来的response响应头中获取jwt令牌并存入Vuex中console.log(response);let jwt = response.headers['jwt'];console.log(jwt);window.vm.$store.commit('setjwt', {jwt: jwt});return response;
}, function(error) {return Promise.reject(error);
});// // 路由请求拦截
// // http request 拦截器
// axios.interceptors.request.use(
//  config => {
//      //config.data = JSON.stringify(config.data);
//      //config.headers['Content-Type'] = 'application/json;charset=UTF-8';
//      //config.headers['Token'] = 'abcxyz';
//      //判断是否存在ticket，如果存在的话，则每个http header都加上ticket
//      // if (cookie.get("token")) {
//      //  //用户每次操作，都将cookie设置成2小时
//      //  cookie.set("token", cookie.get("token"), 1 / 12)
//      //  cookie.set("name", cookie.get("name"), 1 / 12)
//      //  config.headers.token = cookie.get("token");
//      //  config.headers.name = cookie.get("name");
//      // }
//      return config;
//  },
//  error => {
//      return Promise.reject(error.response);
//  });// // 路由响应拦截
// // http response 拦截器
// axios.interceptors.response.use(
//  response => {
//      if (response.data.resultCode == "404") {
//          console.log("response.data.resultCode是404")
//          // 返回 错误代码-1 清除ticket信息并跳转到登录页面
//          //      cookie.del("ticket")
//          //      window.location.href='http://login.com'
//          return
//      } else {
//          return response;
//      }
//  },
//  error => {
//      return Promise.reject(error.response) // 返回接口返回的错误信息
//  });export default axios;

vuex:

index.js:

import Vue from 'vue'
import Vuex from 'vuex'
import createVuexAlong from 'vuex-along'Vue.use(Vuex)
//分别导入其他相应模块
import state from './state'
import getters from './getters'
import mutations from './mutations'
import actions from './actions'
//在store/index.js文件中新建vuex的store实例，并注册上面引入的各大模块
const store = new Vuex.Store({state,getters,mutations,actions,plugins:[createVuexAlong({//设置保存的集合名字，避免同站点下的多项目数据相同name:'hello-vuex-along',session:{list:["dname","collapsed","jwt"]//将数据保存到sessionStorage},// local:{//   list:[""]//将数据保存到localStorage// },justSession:true//仅保存到sessionStorage})]})export default store

actions.js

export default {//actiions:是异步数据更改方式，本质上还是使用的mutations方式来改变数据//payload:用于承载数据，就是json//context:上下文setStaticActionsDname: (context, payload) => {setTimeout(function() {context.commit('setDname', payload);}, 4000)},setDynamicactions: (context, payload) => {//获取路径let _this = payload._this;let url = _this.axios.urls.Vuex_MANAGER;//定义请求参数let params = {methodName: 'queryVuex',resturantName: payload.name}//发起ajax_this.axios.post(url, params).then(resp => {let data = resp.data;console.log(data);context.commit('setDname', {name: data.msg});}).catch(err => {console.log(err);})}
}

getters.js

import state from "./state";export default{getdname:(state)=>{return state.dname;},getcollapsed:(state)=>{return state.collapsed;},getjwt:(state)=>{return state.jwt;}
}

mutations.js

export default {//处理数据的唯一途径，state的改变或赋值只能在这里// type(事件类型)： 其值为setResturantName// payload：官方给它还取了一个高大上的名字：载荷，其实就是一个保存要传递参数的容器setDname:(state,payload)=>{state.dname=payload.name;},setcollapsed:(state,payload)=>{state.collapsed=payload.collapsed;},setjwt:(state,payload)=>{state.jwt=payload.jwt;}}

state.js

export default{dname:'2333333世纪中心',collapsed:false,jwt:''
}

Vue之jwt（跨域身份验证，令牌）相关推荐

c#关于JWT跨域身份验证解决方案
c#关于JWT跨域身份验证解决方案参考文章: (1)c#关于JWT跨域身份验证解决方案 (2)https://www.cnblogs.com/dengbo/p/11672495.html 备忘一下.
JWT跨域身份验证解决方案
JWT跨域身份验证解决方案参考文章: (1)JWT跨域身份验证解决方案 (2)https://www.cnblogs.com/txw1958/p/jwt.html (3)https://www.co ...
JWT(跨域身份验证解决方案)
1. JWT是什么 JSON Web Token (JWT),它是跨域身份验证解决方案之一 2. 为什么使用JWT JWT的精髓在于:"去中心化",数据是保存在客户端的. 3. J ...
php后台跨域token,JSON Web Token（JWT）目前最流行的跨域身份验证解决方案（PHP）类...
JSON Web Token(JWT)是目前最流行的跨域身份验证解决方案,下面我自己封装了一个PHP的Jwt类,直接复制即可使用,无需composer安装包: 常规的身份验证流程为: 该方案的最大的短 ...
使用JWT进行跨域身份验证
传统用户身份验证 Internet服务无法与用户身份验证分开.一般过程如下: 用户向服务器发送用户名和密码. 验证服务器后,相关数据(如用户角色,登录时间等)将保存在当前会话中. 服务器向用户返回se ...
Go语言学习笔记——jwt跨域鉴权
文章目录 Golang jwt跨域鉴权 jwt介绍 JWT 到底是什么? JWT 和 OAuth 选择签名方法签名方法和密钥类型安装jwt 简单使用生成JWT 解析jwt 测试:生成token并 ...
跨域身份管理系统 (SCIM) 简介
Cloudera 的身份团队一直在努力将跨域身份管理系统 (SCIM) 支持添加到 Cloudera 数据平台 (CDP),我们很高兴地宣布 SCIM 在 Azure Active Directory ...
解决Vue前后端跨域问题的多种方式
1 前言本文主要介绍借助解决Vue前后端跨域问题的几种方式说到ajax请求,就不得不说下xhr(XMLHttpRequest)了,它可以说是鼻祖,但是实际开发中,我们不会直接使用它,而是进行二次封 ...
vue脚手架解决跨域问题-------配置反向代理
vue脚手架解决跨域问题-------配置反向代理参考文章: (1)vue脚手架解决跨域问题-------配置反向代理 (2)https://www.cnblogs.com/zbx-boke/p/9 ...

Vue之jwt（跨域身份验证，令牌）