ホームページ > 記事 > ウェブフロントエンド > Lauiuiログイン後のトークン問題の詳細な説明
layui は非常にシンプルで実用的なバックグラウンド管理システム構築フレームワークであり、内部のプラグインも豊富で使いやすく、オリジナルベースの変更のみで済みます。データ処理の効率が若干悪い 弱い 組み込みの jquery では実際の処理が少し足りない 組み込みの mvc モード フレームワークを追加できるとさらに良い
まずはやってみようログイン領域でのlayuiの使用を紹介します。
ログイン 問題は主にトークンのストレージ呼び出しにあります。まず、バックグラウンドでトークンとインターセプタを作成するコードを投稿します。
最初に紹介します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);
/**
* 创建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
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();
}
}
}
}トークンについて話した後、layui がどのようにトークンを保存し、トークンを追加するかについて話しましょう。レンダリングされるたびにリクエスト ヘッダー
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
});
}
}
});
});返されたトークン情報を、layui のローカルに保存されているテーブル、config.js に保存します テーブル名が設定されます。通常は、layui.setter.tableName が使用できます
layui のテーブルは js 経由でレンダリングされるため、リクエストヘッダを js で設定することができず、テーブルごとに設定する必要があります設定が非常に面倒ですが、layui のデータテーブルは ajax リクエストをベースにしているため、各リクエストがテーブル内のリクエスト ヘッダー
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")
})
}
})を自動的に運ぶように、layui のモジュール内の table.js を手動で変更することを選択します。上記の設定に従って、js でこのコードを見つけます
headers: {"token":layui.data(layui.setter.tableName)['token']}、リクエスト ヘッダーを設定するためのトークンは次のとおりです。layui.data(layui.setter.tableName)[' に移動します。トークン'] は、ログインに成功した後にテーブルに保存されます。このようにして、トークンを運ぶのは非常に簡単です
同時に、トークンの有効期限を更新する必要があるため、取得する必要があります新しいトークンを取得してテーブルに置きます
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 の完全なメソッドを使用してトークンを取得し、テーブルの古いトークンを上書きします。空の場合は上書きされません。
テーブルが完成したら、リクエストを見てみましょう。jquery はlayui に組み込まれています。組み込みの ajax を使用するには、var $ =layui, jquery を使用できます。次に、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}
},l で引用したのと同じこと ayui.js またはlayui.all.js で ajaxSettings を見つけて設定します。
layui の詳細については、layui 使用法チュートリアル 列に注目してください。
以上がLauiuiログイン後のトークン問題の詳細な説明の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。