layui登录后token问题解决

1. 什么是token？

Token（令牌）是一段可以标识用户身份、资源权限和有效时间的字符串，通常用于前后端分离的应用中进行身份认证和授权，避免了每次请求都需要携带用户名和密码的不便。在前端界面登录成功后，后端会返回一个Token给用户保存，下次请求时需要将Token带上，以便后端进行认证是否有操作权限。一般Token具有时效性，过期后需要重新登录获取新的Token。

2. layui如何实现登录后的token处理？

layui是一款轻量级的前端UI框架，支持前后端分离的应用开发。Login form是layui中常用的用户登录UI模块，该模块需要提供以下三个参数，其中headers参数用于在头部请求中添加Token信息：

2.1 Layui中的登录接口实现

Layui中实现登录的核心代码如下：

layui.use('form', function() {
    var form = layui.form;
    form.on('submit(login)', function(data) {
        $.ajax({
            url: 'http://localhost:8080/user/login',
            type: 'POST',
            data: data.field,
            dataType: 'json',
            success: function(res) {
                if (res.code == 200) {
                    var token = res.data.token;
                    localStorage.setItem('token', token);
                    window.location.href = 'index.html';
                } else {
                    layer.msg(res.msg);
                }
            }
        });
        return false;
    });
});

以上代码中，登录成功后获取到后端返回的Token，并将它保存在localStorage中，下次请求时从localStorage取出并添加到请求头中：

var token = localStorage.getItem('token');
$.ajax({
    url: 'http://localhost:8080/user/info',
    type: 'POST',
    headers: {
        'Authorization': token
    },
    dataType: 'json',
    success: function(res) {
        console.log(res);
    }
});

2.2 Token的传递

Token在前后端交互中是通过请求头Authorization字段传递的，Authorization字段的值通常由Token类型和Token值组成，中间用空格分隔。Token类型常用的有Bearer和JWT，前者表示Token是Bearer类型，后者表示Token是JWT类型。JWT（JSON Web Token）是一个开放标准，它可以作为Token传递用户的身份信息，通常包含计算机生成的用户ID、用户角色、过期时间等信息，服务器端可以利用这些信息验证请求的合法性，从而进行相应的业务处理。

前端在发起请求时需要将Token添加到headers中：

var token = localStorage.getItem('token');
$.ajax({
    url: 'http://localhost:8080/user/info',
    type: 'POST',
    headers: {
        'Authorization': token
    },
    dataType: 'json',
    success: function(res) {
        console.log(res);
    }
});

后端在接收到请求时需要从headers中获取Token信息：

@GetMapping("/info")
public String getUserInfo(HttpServletRequest request) {
    String token = request.getHeader("Authorization");
    // ...
}

2.3 Token的验证和更新

后端在接收前端请求时需要对Token进行验证，这是为了避免Token被篡改或者过期后被利用。后端可以在Token验证成功后，生成一个新的Token，并将它添加到响应头中。前端在接收到响应后，把新的Token保存到localStorage中或者Cookie中，以便下次请求使用。Token的更新机制可以在后端中间件中实现。

下面是后端对Token的验证和更新的示例代码：

public class JwtInterceptor extends HandlerInterceptorAdapter {
 
    @Override
    public boolean preHandle(HttpServletRequest request, HttpServletResponse response, Object handler) throws Exception {
        String token = request.getHeader("Authorization"); // 从headers中获取Token信息
        Claims claims = JwtUtils.parseToken(token); // 解析Token
        if (claims == null) {
            response.setStatus(HttpStatus.UNAUTHORIZED.value());
            return false;
        }
        // 判断Token是否过期，若过期则返回401状态码
        if (claims.getExpiration().before(new Date())) {
            response.setStatus(HttpStatus.UNAUTHORIZED.value());
            return false;
        }
        // 在响应头中添加新的Token
        response.setHeader("Authorization", JwtUtils.createToken(claims.getSubject(), claims.getExpiration()));
        return true;
    }
}

3. layui登录后的token问题解决

在layui中，登录成功后可以通过localStorage保存Token，在每次请求时从localStorage中取出Token，并添加到headers中。但是在跨域请求中，由于浏览器的同源策略限制，不能直接访问其他域名下的localStorage，从而导致Token丢失。

解决方法是使用Cookie存储Token，这样只要浏览器支持Cookie并且Cookie所在的域名和请求的域名一致，就可以正常访问Token。可以在登录成功后生成一个tokenCookie，并把Token存储在其中：

$.ajax({
    url: 'http://localhost:8080/user/login',
    type: 'POST',
    data: data.field,
    dataType: 'json',
    success: function(res) {
        if (res.code == 200) {
            var token = res.data.token;
            $.cookie('token', token); // 使用jQuery的cookie插件保存Token
            window.location.href = 'index.html';
        } else {
            layer.msg(res.msg);
        }
    }
});

在后端接收请求时，获取Cookie中的Token，加入到响应头中：

@GetMapping("/info")
public String getUserInfo(HttpServletRequest request, HttpServletResponse response) {
    String token = WebUtils.getCookieValue(request, "token"); // 从cookie中获取Token信息
    // ...
    WebUtils.setCookie(response, "token", newToken); // 在响应头中添加新的Token
}

注意：由于Cookie可以通过浏览器访问，所以需要在Token中加入安全信息，比如签名、密钥等，留意信息泄露问题。

4. 总结

Token是一种用于前后端分离的身份认证和授权的机制，可以避免在每次请求中都携带用户名和密码的不便，从而提升了系统的安全性和易用性。Layui中的登录模块可以通过在请求头中添加Token信息来实现身份认证和授权，在跨域请求中可以使用Cookie来代替localStorage保存Token。

本文介绍了layui登录后Token的问题和解决方法，详细讲解了Token的传递、验证和更新机制，同时还介绍了使用Cookie来替代localStorage保存Token的方法。相信对于layui开发人员有很大的帮助。