Heim > Artikel > Web-Frontend > Detaillierte Erläuterung des Token-Problems nach der Laui-Anmeldung
Layui ist ein sehr einfaches und praktisches Framework für den Aufbau eines Hintergrundverwaltungssystems. Die darin enthaltenen Plug-Ins müssen nur geringfügig geändert werden Es ist weniger effizient bei der Datenverarbeitung. Es wäre besser, wenn das integrierte MVC-Modus-Framework hinzugefügt würde Laui im Login-Bereich.
Anmelden Das Problem liegt hauptsächlich im Speicheraufruf des Tokens und des Interceptors im Hintergrund
Führen Sie zuerst das JAR-Paket ein
<dependency>
<groupId>io.jsonwebtoken</groupId>
<artifactId>jjwt</artifactId>
<version>0.7.0</version>
<exclusions>
<exclusion>
<artifactId>jackson-databind</artifactId>
<groupId>com.fasterxml.jackson.core</groupId>
</exclusion>
</exclusions>
</dependency>Token verwendet io.jsonwebtoken, Sie können den geheimen Schlüssel anpassen und Anmeldeinformationen speichern
package com.zeus.utils;
import cn.hutool.json.JSON;
import cn.hutool.json.JSONObject;
import cn.hutool.json.JSONUtil;
import com.zeus.constant.CommonConstants;
import io.jsonwebtoken.Claims;
import io.jsonwebtoken.JwtBuilder;
import io.jsonwebtoken.Jwts;
import io.jsonwebtoken.SignatureAlgorithm;
import org.slf4j.Logger;
import org.slf4j.LoggerFactory;
import javax.crypto.spec.SecretKeySpec;
import javax.xml.bind.DatatypeConverter;
import java.security.Key;
import java.util.Date;
public class TokenUtil {
private static Logger LOG = LoggerFactory.getLogger(TokenUtil.class);
/**
* 创建TOKEN
*
* @param id, issuer, subject, ttlMillis
* @return java.lang.String
* @methodName createJWT
* @author fusheng
* @date 2019/1/10
*/
public static String createJWT(String id, String issuer, String subject, long ttlMillis) {
SignatureAlgorithm signatureAlgorithm = SignatureAlgorithm.HS256;
long nowMillis = System.currentTimeMillis();
Date now = new Date(nowMillis);
byte[] apiKeySecretBytes = DatatypeConverter.parseBase64Binary("englishlearningwebsite");
Key signingKey = new SecretKeySpec(apiKeySecretBytes, signatureAlgorithm.getJcaName());
JwtBuilder builder = Jwts.builder().setId(id)
.setIssuedAt(now)
.setSubject(subject)
.setIssuer(issuer)
.signWith(signatureAlgorithm, signingKey);
if (ttlMillis >= 0) {
long expMillis = nowMillis + ttlMillis;
Date exp = new Date(expMillis);
builder.setExpiration(exp);
}
return builder.compact();
}
/**
* 解密TOKEN
*
* @param jwt
* @return io.jsonwebtoken.Claims
* @methodName parseJWT
* @author fusheng
* @date 2019/1/10
*/
public static Claims parseJWT(String jwt) {
Claims claims = Jwts.parser()
.setSigningKey(DatatypeConverter.parseBase64Binary("englishlearningwebsite"))
.parseClaimsJws(jwt).getBody();
return claims;
}
}Entschlüsselung verwendet hauptsächlich die parseJWT-Methode
public static Contact getContact(String token) {
Claims claims = null;
Contact contact = null;
if (token != null) {
//得到claims类
claims = TokenUtil.parseJWT(token);
cn.hutool.json.JSONObject jsonObject = JSONUtil.parseObj(claims.getSubject());
contact = jsonObject.get("user", Contact.class);
}
return contact;
}Ansprüche sind die entschlüsselte Token-Klasse, die gespeichert wird Alle Informationen im Token
//解密token
claims = TokenUtil.parseJWT(token); //得到用户的类型
String issuer = claims.getIssuer(); //得到登录的时间
Date issuedAt = claims.getIssuedAt(); //得到设置的登录id
String id = claims.getId(); //claims.getExpiration().getTime() > DateUtil.date().getTime() ,判断tokern是否过期
//得到存入token的对象
cn.hutool.json.JSONObject jsonObject = JSONUtil.parseObj(claims.getSubject());
Contact contact = jsonObject.get("user", Contact.class);package com.zeus.interceptor;
import cn.hutool.core.date.DateUtil;
import cn.hutool.json.JSON;
import cn.hutool.json.JSONUtil;
import com.zeus.utils.TokenUtil;
import io.jsonwebtoken.Claims;
import org.apache.commons.lang.StringUtils;
import org.slf4j.Logger;
import org.slf4j.LoggerFactory;
import org.springframework.web.servlet.HandlerInterceptor;
import org.springframework.web.servlet.ModelAndView;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
import java.io.PrintWriter;
import java.util.Map;
import static com.zeus.constant.CommonConstants.EFFECTIVE_TIME;
/**
* 登陆拦截器
*
* @author:fusheng
* @date:2019/1/10
* @ver:1.0
**/
public class LoginHandlerIntercepter implements HandlerInterceptor {
private static final Logger LOG = LoggerFactory.getLogger(LoginHandlerIntercepter.class);
/**
* token 校验
*
* @param httpServletRequest, httpServletResponse, o
* @return boolean
* @methodName preHandle
* @author fusheng
* @date 2019/1/3 0003
*/
@Override
public boolean preHandle(HttpServletRequest httpServletRequest, HttpServletResponse httpServletResponse, Object o) throws Exception {
Map<String, String[]> mapIn = httpServletRequest.getParameterMap();
JSON jsonObject = JSONUtil.parseObj(mapIn);
StringBuffer stringBuffer = httpServletRequest.getRequestURL();
LOG.info("httpServletRequest ,路径:" + stringBuffer + ",入参:" + JSONUtil.toJsonStr(jsonObject));
//校验APP的登陆状态，如果token 没有过期
LOG.info("come in preHandle");
String oldToken = httpServletRequest.getHeader("token");
LOG.info("token:" + oldToken);
/*刷新token，有效期延长至一个月*/
if (StringUtils.isNotBlank(oldToken)) {
Claims claims = null;
try {
claims = TokenUtil.parseJWT(oldToken);
} catch (Exception e) {
e.printStackTrace();
String str = "{\"code\":801,\"msg\":\"登陆失效,请重新登录\"}";
dealErrorReturn(httpServletRequest, httpServletResponse, str);
return false;
}
if (claims.getExpiration().getTime() > DateUtil.date().getTime()) {
String userId = claims.getId();
try {
String newToken = TokenUtil.createJWT(claims.getId(), claims.getIssuer(), claims.getSubject(), EFFECTIVE_TIME);
LOG.info("new TOKEN:{}", newToken);
httpServletRequest.setAttribute("userId", userId);
httpServletResponse.setHeader("token", newToken);
LOG.info("flush token success ,{}", oldToken);
return true;
} catch (Exception e) {
e.printStackTrace();
String str = "{\"code\":801,\"msg\":\"登陆失效,请重新登录\"}";
dealErrorReturn(httpServletRequest, httpServletResponse, str);
return false;
}
}
}
String str = "{\"code\":801,\"msg\":\"登陆失效,请重新登录\"}";
dealErrorReturn(httpServletRequest, httpServletResponse, str);
return false;
}
@Override
public void postHandle(HttpServletRequest httpServletRequest, HttpServletResponse httpServletResponse, Object o, ModelAndView modelAndView) throws Exception {
}
@Override
public void afterCompletion(HttpServletRequest httpServletRequest, HttpServletResponse httpServletResponse, Object o, Exception e) throws Exception {
}
/**
* 返回错误信息给WEB
*
* @param httpServletRequest, httpServletResponse, obj
* @return void
* @methodName dealErrorReturn
* @author fusheng
* @date 2019/1/3 0003
*/
public void dealErrorReturn(HttpServletRequest httpServletRequest, HttpServletResponse httpServletResponse, Object obj) {
String json = (String) obj;
PrintWriter writer = null;
httpServletResponse.setCharacterEncoding("UTF-8");
httpServletResponse.setContentType("application/json; charset=utf-8");
try {
writer = httpServletResponse.getWriter();
writer.print(json);
} catch (IOException ex) {
LOG.error("response error", ex);
} finally {
if (writer != null) {
writer.close();
}
}
}
}Nachdem wir über Token gesprochen haben, sprechen wir darüber, wie Laui jedes Mal Token speichert und dem Anforderungsheader hinzufügt gerendert
form.on('submit(LAY-user-login-submit)', function (obj) {
//请求登入接口
admin.req({
//实际使用请改成服务端真实接口
url: '/userInfo/login',
method: 'POST',
data: obj.field,
done: function (res) {
if (res.code === 0) {
//请求成功后，写入 access_token
layui.data(setter.tableName, {
key: "token",
value: res.data.token
});
//登入成功的提示与跳转
layer.msg(res.msg, {
offset: '15px',
icon: 1,
time: 1000
}, function () {
location.href ="index"
});
} else {
layer.msg(res.msg, {
offset: '15px',
icon: 1,
time: 1000
});
}
}
});
});Wir speichern die zurückgegebenen Token-Informationen in der lokal inlayui gespeicherten Tabelle in config.js. Der Tabellenname wird im Allgemeinen direkt verwendet
Da die Tabelle von Laui über JS gerendert wird, können wir den Anforderungsheader dafür nicht in JS festlegen und müssen jede Tabelle konfigurieren. Die Konfiguration ist äußerst mühsam, aber die Datentabelle von Laui basiert auf einer Ajax-Anfrage, daher haben wir uns entschieden, die Tabelle manuell zu ändern. js im Modul von Laui, sodass jede Anfrage automatisch den Anfrageheader
a.contentType && 0 == a.contentType.indexOf("application/json") && (d = JSON.stringify(d)), t.ajax({
type: a.method || "get",
url: a.url,
contentType: a.contentType,
data: d,
dataType: "json",
headers: {"token":layui.data(layui.setter.tableName)['token']},
success: function (t) {
if(t.code==801){
top.location.href = "index";
}else {
"function" == typeof a.parseData && (t = a.parseData(t) || t), t[n.statusName] != n.statusCode ? (i.renderForm(), i.layMain.html('<div class="' + f + '">' + (t[n.msgName] || "返回的数据不符合规范，正确的成功状态码 (" + n.statusName + ") 应为：" + n.statusCode) + "</div>")) : (i.renderData(t, e, t[n.countName]), o(), a.time = (new Date).getTime() - i.startTime + " ms"), i.setColsWidth(), "function" == typeof a.done && a.done(t, e, t[n.countName])
}
},
error: function (e, t) {
i.layMain.html('<div class="' + f + '">数据接口请求异常：' + t + "</div>"), i.renderForm(), i.setColsWidth()
},
complete: function( xhr,data ){
layui.data(layui.setter.tableName, {
key: "token",
value: xhr.getResponseHeader("token")==null?layui.data(layui.setter.tableName)['token']:xhr.getResponseHeader("token")
})
}
})in der Tabelle trägt. Suchen Sie diesen Code in js, gemäß der obigen Konfiguration
headers: {"token" :layui.data(layui.setter.tableName)['token']}, hier ist das Token zum Festlegen des Anforderungsheaders. Gehen Sie zulayui.data(layui.setter.tableName)['token'], das in der Tabelle gespeichert ist Nach erfolgreicher Anmeldung ist es sehr einfach, den Token zu tragen.
Gleichzeitig müssen wir die Ablaufzeit des Tokens aktualisieren, also müssen wir den neuen Token abrufen und einsetzen Die Tabelle
complete: function( xhr,data ){
layui.data(layui.setter.tableName, {
key: "token",
value: xhr.getResponseHeader("token")==null?layui.data(layui.setter.tableName)['token']:xhr.getResponseHeader("token") })
}Verwenden Sie die vollständige Methode von Ajax und überschreiben Sie das alte Token der Tabelle.
Die Tabelle ist fertig Schauen Sie sich die Anfrage an. Sie können var $ =layui, jquery verwenden, um das integrierte Ajax zu verwenden
pe.extend({
active: 0,
lastModified: {},
etag: {},
ajaxSettings: {
url: en,
type: "GET",
isLocal: Vt.test(tn[1]),
global: !0,
processData: !0,
async: !0,
headers: {"token":layui.data(layui.setter.tableName)['token']},
contentType: "application/x-www-form-urlencoded; charset=UTF-8",
accepts: {
"*": Zt,
text: "text/plain",
html: "text/html",
xml: "application/xml, text/xml",
json: "application/json, text/javascript"
},
contents: {xml: /\bxml\b/, html: /\bhtml/, json: /\bjson\b/},
responseFields: {xml: "responseXML", text: "responseText", json: "responseJSON"},
converters: {"* text": String, "text html": !0, "text json": pe.parseJSON, "text xml": pe.parseXML},
flatOptions: {url: !0, context: !0}
},Weitere Informationen zu Laui finden Sie in der Spalte
Tutorial zur Verwendung von LauiDas obige ist der detaillierte Inhalt vonDetaillierte Erläuterung des Token-Problems nach der Laui-Anmeldung. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!