SpringBoot+Vue前后端分离集成JWT

本文介绍了如何使用SpringBoot和Vue搭建前后端分离的项目,并集成JWT进行用户认证。首先,详细展示了如何在SpringBoot项目中配置JWT,包括添加依赖、配置类、拦截器和控制器。接着,阐述了Vue前端项目的搭建过程,包括目录结构、编码以及axios的使用。最后,通过测试说明了在未登录和登录后如何发起网络请求,以及如何携带JWT token进行授权访问。
摘要由CSDN通过智能技术生成

SpringBoot+Vue前后端分离集成JWT

源代码:https://github.com/AlanLee97/code-demos/tree/master/jwt

一、搭建SpringBoot项目

  1. 添加jwt依赖

    <!-- ======BEGIN jwt ====== -->
    <dependency>
        <groupId>com.auth0</groupId>
        <artifactId>java-jwt</artifactId>
        <version>3.10.3</version>
    </dependency>
    
    <dependency>
        <groupId>io.jsonwebtoken</groupId>
        <artifactId>jjwt</artifactId>
        <version>0.9.1</version>
    </dependency>
    <!-- ======END jwt ====== -->
    
  2. 编码

目录结构

在这里插入图片描述

JwtConfigProperties.java

package top.alanlee.template.config;

import org.springframework.boot.context.properties.ConfigurationProperties;
import org.springframework.stereotype.Component;

/**
 * 配置属性类
 */
@Component
@ConfigurationProperties(prefix = "jwt")
public class JwtConfigProperties{
   
    private long expire;
    private String secret;

    public JwtConfigProperties() {
   
    }

    public JwtConfigProperties(long expire, String secret) {
   
        this.expire = expire;
        this.secret = secret;
    }

    public long getExpire() {
   
        return expire;
    }

    public void setExpire(long expire) {
   
        this.expire = expire;
    }

    public String getSecret() {
   
        return secret;
    }

    public void setSecret(String secret) {
   
        this.secret = secret;
    }

    @Override
    public String toString() {
   
        return "JwtConfigProperties{" +
                "expire=" + expire +
                ", secret='" + secret + '\'' +
                '}';
    }
}

JwtConfigProperties是自定义的配置类,创建了这个类之后就可以在application.yml添加配置了

# 自定义的jwt配置
jwt:
  # 过期时间:2小时
  expire: 7200000
  # 密钥
  secret: 6Dx8SIuaHXJYnpsG18SSpjPs50lZcT52

JWTUtil.java

package top.alanlee.template.util;

import com.auth0.jwt.JWT;
import com.auth0.jwt.algorithms.Algorithm;
import com.auth0.jwt.exceptions.JWTDecodeException;
import com.auth0.jwt.exceptions.SignatureVerificationException;
import com.auth0.jwt.exceptions.TokenExpiredException;
import com.auth0.jwt.interfaces.DecodedJWT;
import com.auth0.jwt.interfaces.JWTVerifier;
import top.alanlee.template.config.JwtConfigProperties;

import java.util.Date;

public class JWTUtil {
   
    /**
     * 校验token是否正确
     * @param token 密钥
     * @return 是否正确
     */
    public static boolean verify(String token, JwtConfigProperties jwtConfigProperties) throws Exception {
   
        try {
   
            Algorithm algorithm = Algorithm.HMAC256(jwtConfigProperties.getSecret());
            JWTVerifier verifier = JWT.require(algorithm).build();
            DecodedJWT jwt = verifier.verify(token);
            System.out.println(jwt);
            return true;
        } 
  • 6
    点赞
  • 25
    收藏
    觉得还不错? 一键收藏
  • 3
    评论
Spring Boot 和 Vue 前后分离项目中集成 CAS (Central Authentication Service,集中认证服务) 单点登录通常是一个常见的需求,这样可以提供统一的登录入口,用户在登录一次后可以在多个系统间无需再次登录。下面是集成的基本步骤: 1. 添加依赖:首先,你需要在 Spring Boot 项目的 pom.xml 或者 build.gradle 文件中添加 CAS 的客户端库依赖。 2. 配置 CAS:在 Spring Boot 应用中,设置 CAS 客户端配置。这包括 CAS 服务器的地址、应用的服务名、回调 URL(处理 CAS 登录成功后的重定向)等信息。通常会在 `application.properties` 或 `application.yml` 中配置 cas相关的属性。 ```properties cas.server-url=http://cas.example.com/cas cas.login-url=http://cas.example.com/cas/login cas.logout-url=http://cas.example.com/cas/logout cas.client-id=your-client-id cas.redirect-uri=http://localhost:8080/login-callback ``` 3. 创建 CAS 授权过滤器:在 Spring Security 配置中添加一个 CASFilter,这个过滤器会检查用户的 CAS 认证状态,并在未授权时引导用户到 CAS 登录页面。 4. 实现登录回调:当用户通过 CAS 登录成功后,CAS 会将用户信息发送回你指定的回调 URL。在这里,你需要捕获这些信息并进行处理,比如设置 session 或者 JWT 令牌,然后重定向回前端。 5. Vue.js 部分:在前端 Vue 项目中,使用 Axios 或其他 HTTP 请求库向后端发起请求时,带上一个 token 或者 JWT 以证明用户身份。如果请求头没有验证信息,后端可以根据配置判断是否需要转发到 CAS 进行二次认证。 6. 登出处理:在前端和后端都实现注销操作,前端可以调用后端提供的 CAS 注销接口,后端再调用 CAS 注销服务并清空 session 或 JWT。 相关问题: 1. 如何在 Spring Boot 中启用 CAS 的客户端支持? 2. 在 Vue 中如何处理 CAS 登录成功后的回调? 3. 如何确保前端和后端的注销操作能够同步 CAS 服务?
评论 3
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值