超实用，Spring Security+JWT+Vue实现一个前后端分离无状态认证Demo

推荐阅读：6月成功定级阿里P7，多亏啃完了这上百页的Java高频核心面试宝典

                  前阿里P7架构师，分享工作心得及面试经验，助力圆梦大厂

                  阿里P8架构师谈：工作1-5年的Java工程师，怎样提高核心竞争力

简介

完整代码：

https://github.com/PuZhiweizuishuai/SpringSecurity-JWT-Vue-Deom

 

运行展示

后端

主要展示 Spring Security 与 JWT 结合使用构建后端 API 接口。

主要功能包括登陆（如何在 Spring Security 中添加验证码登陆），查找，创建，删除并对用户权限进行区分等等。

ps：由于只是 Demo，所以没有调用数据库，以上所说增删改查均在 HashMap 中完成。

前端

展示如何使用 Vue 构建前端后与后端的配合，包括跨域的设置，前端登陆拦截

并实现 POST，GET，DELETE 请求。包括如何在 Vue 中使用后端的 XSRF-TOKEN 防范 CSRF 攻击

技术栈

 

实现细节

创建 Spring boot 项目，添加 JJWT 和 Spring Security 的项目依赖，这个非常简单，有很多的教程都有块内容，唯一需要注意的是，如果你使用的 Java 版本是 11，那么你还需要添加以下依赖，使用 Java8 则不需要。

<dependency>
   <groupId>javax.xml.bind</groupId>
   <artifactId>jaxb-api</artifactId>
   <version>2.3.0</version>
</dependency>

要使用 Spring Security 实现对用户的权限控制，首先需要实现一个简单的 User 对象实现 UserDetails 接口，UserDetails 接口负责提供核心用户的信息，如果你只需要用户登陆的账号密码，不需要其它信息，如验证码等，那么你可以直接使用 Spring Security 默认提供的 User 类，而不需要自己实现。

public class User implements UserDetails {
    private String username;
    private String password;
    private Boolean rememberMe;
    private String verifyCode;
    private String power;
    private Long expirationTime;
    private List<GrantedAuthority> authorities;

    /**
    * 省略其它的 get set 方法
    */

    @Override
    public Collection<? extends GrantedAuthority> getAuthorities() {
        return authorities;
    }

    @Override
    public String getPassword() {
        return password;
    }

    @Override
    public String getUsername() {
        return username;
    }

    @Override
    public boolean isAccountNonExpired() {
        return true;
    }

    @Override
    public boolean isAccountNonLocked() {
        return true;
    }

    @Override
    public boolean isCredentialsNonExpired() {
        return true;
    }

    @Override
    public boolean isEnabled() {
        return true;
    }
}

 

User

这个就是我们要使用到的 User 对象，其中包含了 记住我，验证码等登陆信息，因为 Spring Security 整合 Jwt 本质上就是用自己自定义的登陆过滤器，去替换 Spring Security 原生的登陆过滤器，这样的话，原生的记住我功能就会无法使用，所以我在 User 对象里添加了记住我的信息，用来自己实现这个功能。

JWT 令牌认证工具

首先我们来新建一个 TokenAuthenticationHelper 类，用来处理认证过程中的验证和请求

public class TokenAuthenticationHelper {
    /**
     * 未设置记住我时 token 过期时间
     * */
    private static final long EXPIRATION_TIME = 7200000;

    /**
     * 记住我时 cookie token 过期时间
     * */
    private static final int COOKIE_EXPIRATION_TIME = 1296000;

    private static final String SECRET_KEY = "ThisIsASpringSecurityDemo";
    public static final String COOKIE_TOKEN = "COOKIE-TOKEN";
    public static final String XSRF = "XSRF-TOKEN";

    /**
     * 设置登陆成功后令牌返回
     * */
    public static void addAuthentication(HttpServletRequest request, HttpServletResponse response, Authentication authResult) throws IOException {
        // 获取用户登陆角色
        Collection<? extends GrantedAuthority> authorities = authResult.getAuthorities();
        // 遍历用户角色
        StringBuffer stringBuffer = new StringBuffer();
        authorities.forEach(authority -> {
            stringBuffer.append(authority.getAuthority()).append(",");
        });
        long expirationTime = EXPIRATION_TIME;
        int cookExpirationTime = -1;
        // 处理登陆附加信息
        LoginDetails loginDetails = (LoginDetails) authResult.getDetails();
        if (loginDetails.getRememberMe() != null && loginDetails.getRememberMe()) {
            expirationTime = COOKIE_EXPIRATION_TIME * 1000;
            cookExpirationTime = COOKIE_EXPIRATION_TIME;
        }

        String jwt = Jwts.builder()
                // Subject 设置用户名
                .setSubject(authResult.getName())
                // 设置用户权限
                .claim("authorities", stringBuffer)
                // 过期时间
                .setExpiration(new Date(System.currentTimeMillis() + expirationTime))
                // 签名算法
                .signWith(SignatureAlgorithm.HS512, SECRET_KEY)
                .compact();
        Coo