前后端分离项目中JWT Token身份验证全流程详解

在前后端分离的Web开发架构中，身份验证是保障系统安全的核心环节，JWT（JSON Web Token）凭借其无状态、易扩展的特性成为主流方案。本文将结合实际代码，详细拆解Token身份验证的完整实现思路、核心代码逻辑及设计原则。

 

一、Token身份验证的核心设计理念

 

传统的Session-Cookie验证依赖服务端存储会话信息，在分布式系统中需解决会话共享问题；而JWT Token采用无状态验证模式，将用户身份信息加密后存储在Token中，服务端只需验证Token的合法性即可完成身份校验，无需存储会话数据，大幅提升系统扩展性。

 

核心优势：

 

1. 无状态：服务端无需存储会话，便于集群部署；

2. 跨域友好：Token通过请求头传递，适配前后端分离的跨域场景；

3. 过期可控：可自定义Token有效期，降低被盗用风险；

4. 轻量化：基于JSON格式，传输和解析成本低。

 

二、Token身份验证完整流程（附核心代码）

 

阶段1：登录生成Token（客户端→服务端）

 

1. 前端登录请求代码

 

用户输入账号密码后，前端通过AJAX发起登录请求，将参数转为JSON格式传递：

 

javascript

function login() {

    $.ajax({

        type: "post",

        url: "/user/login",

        contentType: "application/json",

        data: JSON.stringify({

            userName: $("#username").val(),

            password: $("#password").val()

        }),

        success: function(result) {

            if (result.code == 200 && result.data != null) {

                // 登录成功后存储Token和用户ID

                localStorage.setItem("loginUserId", result.data.userId);

                localStorage.setItem("token", result.data.token);

                location.href = "blog_list.html"; // 跳转到业务页面

            }

        }

    });

}

 

 

2. 后端验证并生成Token

 

后端接收登录请求后，校验账号密码合法性，验证通过则生成JWT Token：

 

java

// UserServiceImpl核心逻辑

public LoginResponse check(LoginRequest loginRequest) {

    // 1. 从数据库查询用户信息

    LambdaQueryWrapper<UserInfo> queryWrapper = new LambdaQueryWrapper<>();

    queryWrapper.eq(UserInfo::getUserName, loginRequest.getUserName());

    UserInfo userInfo = userInfoMapper.selectOne(queryWrapper);

    

    // 2. 校验用户是否存在、密码是否正确

    if (userInfo == null) {

        throw new BlogException("用户名不正确");

    }

    if (!userInfo.getPassword().equals(loginRequest.getPassword())) {

        throw new BlogException("密码不正确");

    }

    

    // 3. 生成JWT Token

    String token = JwtUtils.createToken(userInfo.getId().toString());

    

    // 4. 返回Token和用户ID

    LoginResponse loginResponse = new LoginResponse();

    loginResponse.setUserId(userInfo.getId());

    loginResponse.setToken(token);

    return loginResponse;

}

 

 

阶段2：Token的本地存储（客户端）

 

登录成功后，前端将后端返回的Token存储在浏览器的 localStorage 中：

 

javascript

localStorage.setItem("token", result.data.token);

 

 

 localStorage 是浏览器的本地存储机制，Token会持久化保存（除非手动清除），保证用户在关闭浏览器重新打开后仍可保留登录状态。

 

阶段3：请求自动携带Token（客户端→服务端）

 

为避免在每个请求中手动添加Token，前端通过jQuery的全局AJAX拦截器，在所有请求发送前自动将Token放入请求头：

 

javascript

// 全局AJAX请求拦截器：添加Token到请求头

$(document).ajaxSend(function(e, xhr, opt){

    let userToken = localStorage.getItem("token");

    xhr.setRequestHeader("user_token", userToken);

});

 

 

核心作用：所有需要权限的请求都会自动携带 user_token 请求头，无需重复编写Token传递逻辑。

 

阶段4：服务端Token校验（拦截器实现）

 

1. 登录拦截器（LoginInterceptor）：核心校验逻辑

 

java

@Component

public class LoginInterceptor implements HandlerInterceptor {

    @Override

    public boolean preHandle(HttpServletRequest request, HttpServletResponse response, Object handler) throws Exception {

        // 1. 从请求头获取Token

        String userToken = request.getHeader("user_token");

        

        // 2. 校验Token合法性（是否过期、签名是否正确）

        Boolean check = JwtUtils.check(userToken);

        if (check) {

            // Token有效，放行请求

            return true;

        } else {

            // Token无效，返回401未授权状态码

            response.setStatus(401);

            return false;

        }

    }

}

 

 

2. 拦截器配置（WebConfig）：规则管理

 

java

@Configuration

public class WebConfig implements WebMvcConfigurer {

    // 无需拦截的路径：登录接口、静态资源等

    List<String> excludePath = List.of(

        "/user/login",

        "/**/**.html",

        "/pic/**",

        "/js/**",

        "/css/**"

    );

 

    @Override

    public void addInterceptors(InterceptorRegistry registry) {

        registry.addInterceptor(new LoginInterceptor())

            .addPathPatterns("/**") // 拦截所有请求

            .excludePathPatterns(excludePath); // 排除公开路径

    }

}

 

 

-  LoginInterceptor ：负责具体的Token校验逻辑（执行者）；

-  WebConfig ：负责拦截器的注册和规则配置（配置者）；

- 分工设计遵循“单一职责原则”，便于后续扩展（如添加日志拦截器、权限拦截器）。

 

阶段5：Token失效处理（客户端）

 

当Token过期/无效时，服务端返回401状态码，前端通过全局AJAX错误拦截器统一处理，自动跳转到登录页：

 

javascript

// 全局AJAX错误拦截器：处理401未授权

$(document).ajaxError(function (event, xhr, options, exc) {

    if (xhr.status == 401) {

        location.href = "blog_login.html"; // 跳转到登录页

    }

});

 

 

三、关键配套代码说明

1. 全局异常处理（保证错误信息统一返回）

 

@ControllerAdvice

@ResponseBody

public class ExceptionAdvice {

    // 处理自定义业务异常

    @ExceptionHandler(BlogException.class)

    public Result error(BlogException e) {

        log.error("业务异常：", e);

        return Result.error(e.getMessage());

    }

 

    // 处理全局异常

    @ExceptionHandler(Exception.class)

    public Result error(Exception e) {

        log.error("系统异常：", e);

        return Result.error(e.getMessage());

    }

}

 

 

2. 统一响应结果（Result类）

 @Data

public class Result<T> {

    private int code; // 响应码：200成功/其他失败

    private String errMsg; // 错误信息

    private T data; // 响应数据

 

    // 成功响应

    public static <T> Result<T> ok(T data) {

        Result<T> result = new Result<>();

        result.setCode(200);

        result.setData(data);

        return result;

    }

 

    // 失败响应

    public static <T> Result<T> error(String errMsg) {

        Result<T> result = new Result<>();

        result.setCode(-1);

        result.setErrMsg(errMsg);

        return result;

    }

}

四、核心设计原则与最佳实践

 

1. 职责分离原则

2. 安全性设计

3. 用户体验优化

 

五、总结