SpringBoot-Vue 使用 JWT 实现 token 登录验证

• 所需依赖

        <!--        JWT-->
        <dependency>
            <groupId>com.auth0</groupId>
            <artifactId>java-jwt</artifactId>
            <version>3.10.3</version>
        </dependency>

        <!--        mybatis-plus-->
        <dependency>
            <groupId>com.baomidou</groupId>
            <artifactId>mybatis-plus-boot-starter</artifactId>
            <version>3.5.1</version>
        </dependency>

1.创建 TokenUtils 类 作用：生成token

@Component
public class TokenUtils {
    /**
     * 生成token
     */
    public static String genTonke(String userId, String sign) {
        return JWT.create().withAudience(userId)//将 user id 保存到 token 里面,作为载荷
                .withExpiresAt(DateUtil.offsetHour(new Date(), 2))//2小时后token过期
                .sign(Algorithm.HMAC256(sign));//以 password 作为 token 的密钥
    }

}

2.创建 JWT 拦截器 JwtInterceptor

public class JwtInterceptor implements HandlerInterceptor {
    @Autowired
    private IUserService userService;

    @Override
    public boolean preHandle(HttpServletRequest request, HttpServletResponse response, Object handler) throws Exception {
        String token = request.getHeader("token");
        //如果不是映射到方法直接通过
        if (!(handler instanceof HandlerMethod)){
            return true;
        }
        //执行认证
        if (StrUtil.isBlank(token)){
            throw new ServiceException(AppHttpCodeEnum.NEED_LOGIN.getCode(),"无token，请重新登录");
        }
        //获取token中的userId
        String userId;
        try{
            userId= JWT.decode(token).getAudience().get(0);
        }catch (JWTDecodeException j){
            throw new ServiceException(AppHttpCodeEnum.NEED_LOGIN.getCode(), "token验证失败,请重新登陆");
        }

        //根据token中的userid查询数据库
        User user = userService.getById(Integer.valueOf(userId));
        if (user == null){
            throw new ServiceException(AppHttpCodeEnum.NEED_LOGIN.getCode(),"用户不存在,请重新登陆");
        }

        //用户密码加签验证token
        JWTVerifier jwtVerifier = JWT.require(Algorithm.HMAC256(user.getPassword())).build();
        try{
            jwtVerifier.verify(token);
        }catch (JWTVerificationException e){
            throw new ServiceException(AppHttpCodeEnum.NEED_LOGIN.getCode(),"token验证失败,请重新登陆");
        }

        return true;
    }
}

 3.创建 拦截器 配置类 ItnterceptorConfing

@Configuration
public class ItnterceptorConfing implements WebMvcConfigurer {
    @Override
    public void addInterceptors(InterceptorRegistry registry) {

        registry.addInterceptor(jwtInterceptor())
                .addPathPatterns("/**")  //拦截所有请求，通过判断token是否合法来决定是否需要登录
                .excludePathPatterns("/user/login","/file/*","/user/export","/user/import");//排除特定路径
    }

    //JwtInterceptor 拦截器通过 jwtInterceptor() 方法注册为一个 Spring Bean，所有请求都会经过 JwtInterceptor 进行 JWT 认证检查。
    @Bean
    public JwtInterceptor jwtInterceptor(){
        return new JwtInterceptor();
    }
}

4.在执行登录验证方法时 返回 token 给前端

 @Service
public class UserServiceImpl extends ServiceImpl<UserMapper,User> implements IUserService {

    @Override
    public User login(User user) {
        QueryWrapper<User> userQueryWrapper = new QueryWrapper<>();
        userQueryWrapper.eq("name",user.getName());
        userQueryWrapper.eq("password",user.getPassword());

        //通过前端传过来的值 从数据库中查询到对应的用户对象
        User one = getOne(userQueryWrapper);

        //获取到生成的 token
        String tonke = TokenUtils.genTonke(String.valueOf(one.getId()), one.getPassword());
        if (one!=null){
            BeanUtil.copyProperties(one,user,true);

            //将 tokeng 给到 user对象 ，跟随 user 对象一起返回
            user.setToken(tonke);
            return user;
        }
        return null;
    }
}

5.VUE 前端 在request.js中将 token 配置到请求头

import axios from 'axios'

const request = axios.create({
	baseURL: 'http://localhost:8100',
    timeout: 5000
})

request.interceptors.request.use(config => {
    // 设置请求的Content-Type为application/json;charset=utf-8
    config.headers['Content-Type'] = 'application/json;charset=utf-8';

    // 从localStorage中获取名为"user"的数据，如果存在则解析为JSON对象，否则为null
    let user = localStorage.getItem("user") ? JSON.parse(localStorage.getItem("user")) : null;

    // 如果获取到了用户数据（即user不为null）
    if (user) {
        // 将用户的token添加到请求的header中的token字段
        config.headers['token'] = user.token;
    }

    // 返回经过处理后的config配置对象
    return config;
}, error => {
    // 如果发生错误，将错误传递给下一个处理函数
    return Promise.reject(error);
});


// response 拦截器
// 可以在接口响应后统一处理结果
request.interceptors.response.use(
    response => {
        let res = response.data;
        // 如果是返回的文件
        if (response.config.responseType === 'blob') {
            return res
        }
        // 兼容服务端返回的字符串数据
        if (typeof res === 'string') {
            res = res ? JSON.parse(res) : res
        }
        return res;
    },
    error => {
        console.log('err' + error) // for debug
        return Promise.reject(error)
    }
)


export default request

5.VUE 前端登录方法执行时将响应数据（包含了token）存储到 localStorage 中

handleLogin() {
    // 发送 POST 请求到 "/user/login" 接口，传递 this.form 作为请求体
    this.request.post("/user/login", this.form).then(res => {
        // 请求成功后的处理逻辑
        if (res) {
            // 如果返回的响应对象存在（即登录成功）
            this.$router.push("/main"); // 跳转到 "/main" 路由页面
            this.$message.success("登录成功"); // 显示成功消息
            localStorage.setItem("user", JSON.stringify(res)); // 将响应数据（用户信息）存储到 localStorage 中
        } else {
            // 如果响应对象不存在（即登录失败）
            this.$message.error("账号或密码不正确，登录失败"); // 显示错误消息
        }
    });
}