layuiest un cadre de construction de système de gestion d'arrière-plan très simple et pratique. Les plug-ins qu'il contient sont riches et faciles à utiliser. Il vous suffit de modifier l'original. Cependant, il est légèrement faible dans le traitement des données et le jquery intégré est légèrement insuffisant dans le processus réel. Il serait préférable que le framework de mode mvc intégré puisse être ajouté.
Introduisons d'abord l'utilisation de layui dans la zone de connexion :
Le problème de connexion est principalement lié au stockage et à l'appel des tokens. Tout d'abord, je publierai le code de création des tokens et des intercepteurs. en arrière-plan
Introduisez d'abord le package jar
io.jsonwebtoken jjwt 0.7.0 jackson-databind com.fasterxml.jackson.core
Le jeton utilise io.jsonwebtoken, vous pouvez personnaliser la clé secrète et stocker les informations de connexion
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; } }
Le décryptage est principalement utilisé dans le méthode parseJWT
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; }
claims Il s'agit d'une classe de jeton déchiffrée qui stocke toutes les informations dans le jeton
//解密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);
Le jeton créé sera placé dans l'en-tête de la demande sur la page. utilise un intercepteur pour déterminer s'il a expiré. S'il expire, interceptez la demande et, en cas de succès, renvoyez un nouveau jeton dans l'en-tête de réponse pour mettre à jour le délai d'expiration
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 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(); } } } }
Après avoir parlé des jetons, parlons-en. comment layui stocke les jetons et ajoute des jetons aux en-têtes de requête à chaque fois qu'ils sont rendus
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 }); } } }); });
Nous stockerons les informations de jeton renvoyées dans la table stockée localement dans layui. Le nom de la table sera généralement configuré dans config.js. , layui.setter.tableName peut être utilisé directement
Étant donné que la table de layui est rendue via js, nous ne pouvons pas définir l'en-tête de la requête dans js, et il est extrêmement difficile de configurer chaque table. La table de layui est basée sur une requête ajax, nous choisissons donc de modifier manuellement la table dans le module de layui .js pour que chaque requête porte automatiquement l'en-tête de la requête
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('' + (t[n.msgName] || "返回的数据不符合规范，正确的成功状态码 (" + n.statusName + ") 应为：" + n.statusCode) + "")) : (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('数据接口请求异常：' + t + ""), 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") }) } })
Trouvez ce code dans table.js, selon. la configuration ci-dessus
headers: {"token":layui.data(layui.setter.tableName)['token']},
Voici le jeton pour définir l'en-tête de la demande, accédez à layui.data(layui.setter.tableName)['token'] stocké dans la table après une connexion réussie. c'est très simple de transporter le token
En même temps, nous devons mettre à jour le délai d'expiration du token, nous devons donc obtenir le nouveau token et le mettre dans le tableau
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") }) }
Utilisez la méthode complète d'ajax pour obtenir le jeton et écrasez l'ancien jeton de la table s'il est vide, il ne sera pas écrasé
Une fois la table terminée, jetons un œil à la demande. . Layui a jquery intégré. Vous pouvez utiliser var $ = layui,jquery pour utiliser l'ajax intégré. Ensuite, nous devons également configurer ajax
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} },
Également dans le ayui.js que vous avez cité ou trouver ajaxSettings. dans layui.all.js : configurez-le
Pour plus de connaissances surlayui, veuillez faire attention au site Web PHP chinoislayuicolonne du didacticiel
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!
qu'est-ce que la puce FAI
collection de codes d'arrière-plan CSS
Il existe plusieurs types de tableaux php
Comment résoudre le problème selon lequel la valeur de retour scanf est ignorée
Comment résoudre le problème selon lequel le dossier Win10 ne peut pas être supprimé
Temps de panne du service Windows 10
Comment résoudre le problème d'accès refusé lors du démarrage de Windows 10
Comment changer devc++ en chinois
![[Web front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
