1. Introduction
1. What is jwt and its components
JWT (JSON Web Token) is an open standard for securely transmitting claims between web applications. It consists of three parts: Header , Payload and Signature .
The header mainly contains information describing the JWT type and the signature algorithm used. The payload contains claims that need to be transmitted, such as user identity, permissions and other information. A signature is a signature of the header, payload and a key to verify the integrity of the data.
1.1 Header
{"typ":"JWT","alg":"HS256"}The
typ attribute in this json is used to identify that the entire token string is a JWT string; its alg attribute is used to indicate when this JWT is issued The full names of the signature and digest algorithms used,
typ and alg attributes, are actually type and algorithm, meaning type and algorithm respectively. The reason why they are represented by three letters is also based on the consideration of the final string size of JWT,
and it is also consistent with the name of JWT, so they are all three characters...typ and alg are the attribute names specified in the JWT standard.
1.2 Payload
{"sub":"123","name":"Tom","admin":true}
payload is used to carry the data to be transmitted. Its json structure is actually a set of declarations for the data to be transmitted by JWT. These statements are called claims by the JWT standard. One of its "attribute value pairs" is actually a claim (requirement). Each claim represents a specific meaning and function.
- The English word "claim" means request.
- For example, sub in the above structure represents the owner of this token, and the owner's ID is stored; name represents the name of the owner; admin represents whether the owner has the role of administrator. When JWT is verified later, these claims can play a specific role.
- According to JWT standards, these claims can be divided into the following three types:
A. Reserved claims (reserved)
have the same meaning as reserved words in programming languages, and belong to some claims specified in the JWT standard. The claims defined in the JWT standard are:
iss(Issuser) : represents the issuing subject of this JWT;
sub(Subject) : represents the subject of this JWT, that is, its owner;
aud(Audience) : represents the receiving object of this JWT;
exp(Expiration time) : is a timestamp, representing the expiration time of this JWT;
nbf(Not Before) : is a timestamp, representing the start time when this JWT takes effect, which means that JWT verification will fail before this time;
iat(Issued at) : is a timestamp, representing the issuance time of this JWT;
jti(JWT ID) : is the unique identifier of JWT.
B.Public claimsC. Private claims (private)
refers to custom claims. For example, admin and name in the previous example are both custom claims. The difference between these claims and the claims stipulated in the JWT standard is that for the claims stipulated in the JWT, the
receiver of the JWT knows how to verify these standard claims after getting the JWT; while private claims will not be verified unless the receiver is explicitly told to do so. Verification and rules are required for these claims.According to the JWT standard: the reserved claims are optional. It is not mandatory to use the above claims when generating the payload. You can define the payload structure according to your own ideas, but this is not necessary at all: first
, If JWT is used for authentication, then several claims specified in the JWT standard are enough, or even only one or two of them are needed. If you want to store more user business information in JWT, such as roles and user names,
etc. , this is added with a custom claim; secondly, the JWT standard provides detailed verification rule descriptions for its own claims, and each implementation library will refer to this description to provide JWT verification implementation,
so If it is a custom claim name, then the implementation library you use will not actively verify these claims.
1.3 signature
The signature is generated by concatenating the two strings obtained by base64url encoding the json structures corresponding to the header and payload with English periods, and then generating them according to the signature algorithm specified by alg in the header.
Different algorithms have different signature results. Take alg: HS256 as an example to illustrate how to obtain the previous signature.
According to the previous description of the available values of alg, HS256 actually contains two algorithms: HMAC algorithm and SHA256 algorithm. The former is used to generate a digest, and the latter is used to digitally sign the digest. These two algorithms can also be collectively referred to as HMACSHA256
2. Why use jwt
The main advantage of JWT is that it is stateless and self-contained. Because the JWT contains all the required information, there is no need to store any state on the server side. It only needs to verify the validity of the JWT through the key. This makes JWT very suitable in distributed systems.
The essence of JWT is: "decentralization", the data is saved on the client.
3. Working principle of jwt
Here's how JWT works:
- Users authenticate using valid credentials (such as username and password);
- After the server successfully verifies the credentials, it generates a JWT and sends it to the client;
- The client stores the JWT, usually in the local storage of the front end (such as localStorage of the browser or Keychain of the mobile terminal);
- The client carries JWT in the request header or request parameter every time it communicates with the server;
- The server verifies and decodes the JWT to obtain the information and verify the validity of the signature;
- If the authentication is successful, the server can authorize the user to access the specific resource based on the claims contained therein.
Steps to simplify how it works:
- Yes after server authentication a JSON object is generated and sent back to the user
- Later, when the user communicates with the server, the client sends back the JSON object in the request
- In order to prevent users from tampering with data, the server will add a signature when generating the object and verify the data sent back
2. jwt tool class
We provide a written jwt tool class here. Before that, we need to import the jwt pom file .
pom.xml
<dependency>
<groupId>io.jsonwebtoken</groupId>
<artifactId>jjwt</artifactId>
<version>${jwt.version}</version>
</dependency>
<dependency>
<groupId>com.auth0</groupId>
<artifactId>java-jwt</artifactId>
<version>${java.jwt.version}</version>
</dependency>JwtUtils.java
package com.tgq.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("tgq")
// 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();
}
}
Parsing code:
Method to create jwt.
The first parameter is our user information; the second parameter means the living time. The time we set in this code is 30 minutes.
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("tgq") // 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(); }
How to parse jwt
public static Claims parseJwt(String jwt) { Claims claims = Jwts.parser() .setSigningKey(JWT_KEY) .parseClaimsJws(jwt) .getBody(); return claims; }
How to copy jwt
The function of this method is to extend the validity time of the existing jwt
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(); }
3. Use of jwt
Let's write and test the functions of jwt
Create jwt
@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));
}
Parse jwt
@Test
public void test2() {// 解析oldJwt
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));
}Using an expired jwt token will report an error. We only need to use our newly generated jwt to compile it.
Extend the time of jwt
@Test
public void test3() {// 复制jwt，并延时30分钟
String oldJwt = "eyJhbGciOiJIUzI1NiJ9.eyJpc3MiOiJ0Z3EiLCJleHAiOjE2OTcxOTYzMzQsImlhdCI6MTY5NzE5NDUzNCwiYWdlIjoxOCwianRpIjoiM2Q3NmU1NjkwNDQzNDRkMjgxZTBmZjZkYjRlYjYwNzciLCJ1c2VybmFtZSI6InpzcyJ9.s0PQQT8-qSIhJRja5rR7_mZfbGLk9ZXbI1RCOk0nCi4";
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));
}
4. JWT application (combined with SPA project)
Before doing this, we need to ensure that our background login method uses jwt, and our jwt verification is also a filter .
@RequestMapping("/userLogin")
@ResponseBody
public JsonResponseBody<?> userLogin(UserVo userVo, HttpServletResponse response) {
if (userVo.getUsername().equals("admin") && userVo.getPassword().equals("123")) {
// 私有要求claim
Map<String,Object> json=new HashMap<String,Object>();
json.put("username", userVo.getUsername());
// 生成JWT，并设置到response响应头中
String jwt=JwtUtils.createJwt(json, JwtUtils.JWT_WEB_TTL);
response.setHeader(JwtUtils.JWT_HEADER_KEY, jwt);
return new JsonResponseBody<>("用户登陆成功！", true, 0, null);
} else {
return new JsonResponseBody<>("用户名或密码错误！", false, 0, null);
}
}JwtFilter
package com.tgq.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 tgq
*
*/
public class JwtFilter implements Filter {
// 排除的URL，一般为登陆的URL(请改成自己登陆的URL)
private static String EXCLUDE = "^/user/userLogin?.*$";
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;
//获取当前请求路径。只有登录的请求路径不进行校验之外，其他的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);
// }
}
Before using it, we have to ask about our cross-domain issues. We have to use this cross-domain issue.
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() { } }
state.js
export default {
stateName:'王德法',
jwt:''
}
mutations.js
export default {
// state == state.js文件中导出的对象；payload是vue文件传过来的参数
setName: (state, payload) => {
state.stateName = payload.stateName
},
setJwt: (state, payload) => {
state.jwt = payload.jwt
}
}
getters.js
export default {
// state == state.js文件中导出的对象；payload是vue文件传过来的参数
getName: (state) => {
return state.stateName;
},
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);
});Remember to configure it in 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>
<!--JwtFilter-->
<filter>
<filter-name>jwtFilter</filter-name>
<filter-class>com.zking.ssm.jwt.JwtFilter</filter-class>
</filter>
<filter-mapping>
<filter-name>jwtFilter</filter-name>
<url-pattern>/*</url-pattern>
</filter-mapping>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 && require('@/mock') // 新添加1 import ElementUI from 'element-ui' // 新添加2，避免后期打包样式不同，要放在import App from './App';之前 import 'element-ui/lib/theme-chalk/index.css' import App from './App' import router from './router' import store from './store' // 新添加3----实例进行一个挂载 Vue.use(ElementUI) Vue.config.productionTip = false import axios from '@/api/http' import VueAxios from 'vue-axios' Vue.use(VueAxios, axios) /* eslint-disable no-new */ window.ss = new Vue({ el: '#app', router, store, //定义变量 data() { return { Bus: new Vue() } }, components: {App}, template: '<App/>' })Remember to change window.ss .
There is a token error when running directly, which requires us to log in.
