layui是一個非常簡單且實用的后臺管理系統(tǒng)搭建框架，里面的插件豐富使用簡單，只需要在原有基礎上進行修改即可，但是在數(shù)據(jù)處理方面略顯薄弱，內(nèi)置的jquery在實際過程中略顯不足，若是能添加內(nèi)置的mvc模式框架那就更好了。

先介紹layui在登錄這一塊的使用：

登錄問題主要是在token的存儲調(diào)用上，先貼出后臺的創(chuàng)建token以及攔截器的代碼

首先引入jar包

<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使用io.jsonwebtoken ，可以自定義秘鑰，并存儲登錄信息

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);      /**      * 創(chuàng)建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;     }  }

解密主要使用到 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 中是解密后的token類，存儲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);

創(chuàng)建好的token會在頁面中放置到請求頭中，后臺通過來攔截器來判斷是否過期，若過期則攔截請求，成功則在響應頭中返回新的token更新過期時間

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 + ",入?yún)?" + JSONUtil.toJsonStr(jsonObject));          //校驗APP的登陸狀態(tài)，如果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();             }         }     } }

講完了token ,再講layui如何存儲token,并在每次渲染時添加token到請求頭中

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                         });                         //登入成功的提示與跳轉(zhuǎn)                         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                         });                     }                 }             });         });

我們將返回的token信息存入layui本地存儲的表中，在config.js中會配置表名，一般直接使用layui.setter.tableName 即可，

由于layui的table 是通過js渲染的，我們無法在js中對它進行設置請求頭，而且每一個表格都要配置極為麻煩，但layui的數(shù)據(jù)表格是基于ajax請求的，所以我們選在在layui的module中手動修改table.js使得，每次請求是都會自動攜帶請求頭

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] || "返回的數(shù)據(jù)不符合規(guī)范，正確的成功狀態(tài)碼 (" + 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 + '">數(shù)據(jù)接口請求異常：' + 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")                     })                 }             })

在table.js中找到這一代碼，按上面的配置

headers: {"token":layui.data(layui.setter.tableName)['token']},

這里是設置請求頭的token,拿到登錄成功后存儲在表中的layui.data(layui.setter.tableName)['token']， 這樣既可攜帶token很簡單

同時我們需要更新token的過期時間，那么就要拿到新的token，并放入表中

 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") })  }

使用ajax的complete方法拿到token,并覆蓋表的舊token,如果為空則不覆蓋

table講完，來看看請求，layui中內(nèi)置了jquery，可以使用var $ = layui,jquery, 來使用內(nèi)置的ajax,那么我們也需要對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: /bxmlb/, html: /bhtml/, json: /bjsonb/},             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}         },

同樣在l你引用的ayui.js或者layui.all.js中找到 ajaxSettings:配置一下即可