如何解決layui登錄后token的問題
如何解決layui登錄后token的問題？相信很多新手小白還沒學(xué)會這個技能，通過這篇文章的總結(jié)，希望你能學(xué)會解決layui登錄后token問題。如下資料是關(guān)于解決的步驟。
創(chuàng)新互聯(lián)公司公司2013年成立，公司以網(wǎng)站建設(shè)、成都網(wǎng)站設(shè)計、系統(tǒng)開發(fā)、網(wǎng)絡(luò)推廣、文化傳媒、企業(yè)宣傳、平面廣告設(shè)計等為主要業(yè)務(wù)，適用行業(yè)近百種。服務(wù)企業(yè)客戶近1000家，涉及國內(nèi)多個省份客戶。擁有多年網(wǎng)站建設(shè)開發(fā)經(jīng)驗。為企業(yè)提供專業(yè)的網(wǎng)站建設(shè)、創(chuàng)意設(shè)計、宣傳推廣等服務(wù)。 通過專業(yè)的設(shè)計、獨特的風(fēng)格，為不同客戶提供各種風(fēng)格的特色服務(wù)。
layui是一個非常簡單且實用的后臺管理系統(tǒng)搭建框架，里面的插件豐富使用簡單，只需要在原有基礎(chǔ)上進(jìn)行修改即可，但是在數(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();
//得到設(shè)置的登錄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會在頁面中放置到請求頭中，后臺通過來攔截器來判斷是否過期，若過期則攔截請求，成功則在響應(yīng)頭中返回新的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({
//實際使用請改成服務(wù)端真實接口
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中對它進(jìn)行設(shè)置請求頭，而且每一個表格都要配置極為麻煩，但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 + ") 應(yīng)為：" + 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']},這里是設(shè)置請求頭的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進(jìn)行配置
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}
},同樣在l你引用的ayui.js或者layui.all.js中找到 ajaxSettings:配置一下即可
以上就是解決layui登錄后token的問題的具體操作，代碼詳細(xì)清楚，如果在日常工作遇到這個問題，希望你能通過這篇文章解決問題。如果想了解更多相關(guān)內(nèi)容，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道！
文章標(biāo)題：如何解決layui登錄后token的問題
文章起源：http://bm7419.com/article14/jcicge.html
成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供App開發(fā)、網(wǎng)頁設(shè)計公司、網(wǎng)站導(dǎo)航、品牌網(wǎng)站建設(shè)、全網(wǎng)營銷推廣、網(wǎng)站建設(shè)
聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)
- 開發(fā)好的APP如何獲取用戶，告訴你了你也不一定領(lǐng)悟明白! 2022-06-02
- 外貿(mào)建站完成后如何繼續(xù)完善 2021-08-25
- 看看這些谷歌SEO和外貿(mào)建站常見的錯誤你有沒有 2016-03-09
- 外貿(mào)建站中的哪些細(xì)節(jié)影響著網(wǎng)站流量？ 2015-06-11
- 外貿(mào)建站過程中一些問題以及應(yīng)該注意什么 2015-07-07
- 談?wù)勍赓Q(mào)建站為什么要選擇香港服務(wù)器？ 2022-10-03
- 外貿(mào)建站沒有你想的那么簡單 2015-04-16
- 按外貿(mào)建站域名五原則挑選老外喜歡的域名 2015-05-01
- 外貿(mào)建站推廣怎么做效果最好? 2016-03-23
- 外貿(mào)建站不得不說的秘密 2015-05-07
- 外貿(mào)建站和推廣如何做 2021-01-28
- 外貿(mào)建站選美國空間還是香港空間好？ 2022-10-10