Das Token-Problem ist nach der Laui-Anmeldung gelöst-Layui-Tutorial-php.cn

Das Token-Problem ist nach der Laui-Anmeldung gelöst

Layui ist ein sehr einfaches und praktisches Framework für den Aufbau eines Hintergrundverwaltungssystems. Die darin enthaltenen Plug-Ins sind umfangreich und einfach zu verwenden Die ursprüngliche Basis ist jedoch etwas schwach in der Datenverarbeitung und die integrierte JQuery ist im tatsächlichen Prozess etwas unzureichend. Es wäre besser, wenn das integrierte MVC-Modus-Framework hinzugefügt werden könnte.

Lassen Sie uns zunächst die Verwendung von Laui im Anmeldebereich vorstellen:

Das Anmeldeproblem hängt hauptsächlich mit der Speicherung und dem Aufruf von Token zusammen. Zuerst werden wir den Code zum Erstellen von Token und Interceptors veröffentlichen 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>

Nach dem Login kopieren

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;
    }

}

Nach dem Login kopieren

Entschlüsselung wird hauptsächlich in verwendet 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;
    }

Nach dem Login kopieren

claims Es handelt sich um eine entschlüsselte Token-Klasse, die alle Informationen im Token speichert

//解密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);

Nach dem Login kopieren

Das erstellte Token wird im Anforderungsheader auf der Seite platziert Verwendet einen Interceptor, um festzustellen, ob es abgelaufen ist. Fangen Sie die Anforderung ab und geben Sie bei Erfolg ein neues Token im Antwortheader zurück, um die Ablaufzeit zu aktualisieren

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();
            }
        }
    }
}

Nach dem Login kopieren

Nachdem wir über Token gesprochen haben, sprechen wir darüber wie Laui Token speichert und bei jedem Rendern Token zu den Anforderungsheadern hinzufügt

form.on(&#39;submit(LAY-user-login-submit)&#39;, function (obj) {
            //请求登入接口
            admin.req({
                //实际使用请改成服务端真实接口
                url: &#39;/userInfo/login&#39;,
                method: &#39;POST&#39;,
                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: &#39;15px&#39;,
                            icon: 1,
                            time: 1000
                        }, function () {
                            location.href ="index"

                        });
                    } else {
                        layer.msg(res.msg, {
                            offset: &#39;15px&#39;,
                            icon: 1,
                            time: 1000
                        });
                    }
                }
            });
        });

Nach dem Login kopieren

Wir speichern die zurückgegebenen Token-Informationen in der lokal in Laui gespeicherten Tabelle. Der Tabellenname wird im Allgemeinen in config.js konfiguriert ,layui.setter.tableName kann direkt verwendet werden

Da die Tabelle vonlayui über js gerendert wird, können wir den Anforderungsheader nicht in js festlegen, und es ist äußerst mühsam, die Daten jeder Tabelle zu konfigurieren Die Tabelle von Laui basiert auf einer Ajax-Anfrage, daher haben wir uns dafür entschieden, die Tabelle im Modul von Laui .js manuell zu ändern, sodass jede Anfrage automatisch den Anforderungsheader enthält

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)[&#39;token&#39;]},
                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(&#39;<div class="&#39; + f + &#39;">&#39; + (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(&#39;<div class="&#39; + f + &#39;">数据接口请求异常：&#39; + 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)[&#39;token&#39;]:xhr.getResponseHeader("token")
                    })
                }
            })

Nach dem Login kopieren

Diesen Code finden Sie in table.js die obige Konfiguration

headers: {"token":layui.data(layui.setter.tableName)[&#39;token&#39;]},

Nach dem Login kopieren

Hier ist das Token zum Festlegen des Anforderungsheaders. Gehen Sie zulayui.data(layui.setter.tableName)['token'], das nach erfolgreicher Anmeldung in der Tabelle gespeichert wird. Es ist sehr einfach, den Token zu tragen

Gleichzeitig müssen wir die Ablaufzeit des Tokens aktualisieren, also müssen wir den neuen Token abrufen und in die Tabelle einfügen

 complete: function( xhr,data ){

     layui.data(layui.setter.tableName, {

key: "token",

value: xhr.getResponseHeader("token")==null?layui.data(layui.setter.tableName)[&#39;token&#39;]:xhr.getResponseHeader("token") })

}

Nach dem Login kopieren

Verwenden Sie die vollständige Methode von Ajax, um das Token abzurufen und das alte Token der Tabelle zu überschreiben. Wenn es leer ist, wird es nicht überschrieben. Nachdem die Tabelle fertig ist, schauen wir uns die Anfrage an . Layui verfügt über eine integrierte JQuery. Sie können var $ =layui,jquery verwenden, um 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)[&#39;token&#39;]},
            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}
        },

Nach dem Login kopieren

Auch in den von Ihnen zitierten ayui.js inlayui.all.js: Konfigurieren Sie es

Weitere Informationen zu

layui

finden Sie auf der chinesischen PHP-Website layuiTutorial-Spalte

Das obige ist der detaillierte Inhalt vonDas Token-Problem ist nach der Laui-Anmeldung gelöst. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!