Spring Security+JWT+Vue实现登录权限控制(一)

2023年 9月 16日 122.1k 0

登录认证

Spring Security实现登录认证主要借助其一系列过滤器链,而其中和登录最相关的就是UsernamePasswordAuthenticationFilter。但是这个过滤器只能实现基本的表单登录,表单中只能有用户名(username)和密码(password)。如果我们想自定义我们的登录表单,就必须自己实现一个过滤器,并且继承这个UsernamePasswordAuthenticationFilter

JWT

JWT,即JSON Web Token,由三部分组成:Header, Payload, Signature,并且之间由圆点(.)隔开。

JWT可以实现权限认证功能,当用户登录成功后,服务端会生成一个token传递给客户端。用户后面的每一个请求都包含了这个token,服务端解析出这个token从而判断出用户拥有的权限和能访问的资源。

JWT和之前使用的session不同,session必须保存在服务端,会增加内存开销。而且session在集群和分布式系统中需要共享,通常由Redis实现,而JWT不需要。

跨域配置

前后端分离的项目中一般都会遇到跨域的问题,我们可以通过配置来解决跨域的问题。

在Vue的index.js中添加如下代码:

proxyTable: {
  '/api': {
    target: 'http://localhost:8080',
    changeOrigin: true,
    pathRewrite: {
      '^/': ''
    }
  }
}

而在Spring Boot的config包下添加CorsConfig配置类,代码如下:

@Configuration
public class CorsConfig {
​
    @Bean
    public CorsFilter corsFilter() {
        UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource();
        CorsConfiguration corsConfiguration = new CorsConfiguration();
        //允许源,这里允许所有源访问,实际应用会加以限制
        corsConfiguration.addAllowedOrigin("*");
        //允许所有请求头
        corsConfiguration.addAllowedHeader("*");
        //允许所有方法
        corsConfiguration.addAllowedMethod("*");
        source.registerCorsConfiguration("/**", corsConfiguration);
        return new CorsFilter(source);
    }
​
}

这样前后端分离的项目的跨域问题将会得以解决。

但是,在引进Spring Security后又会出现跨域问题😂,此时需要在config/SecurityConfig中再次进行跨域配置。代码在下面的后端部分呈现。

后端部分

项目主要有两类用户:普通用户和系统管理员。那么我一开始就直接简化处理了😂,将两者合并为一个类User,并且实现UserDetails接口,数据表中添加一个条目为role,类型为String,也就是角色属性,用来控制权限的。role属性我分成了两类:USERADMIN

getAuthorities方法实现如下:

public Collection

相关文章

JavaScript2024新功能:Object.groupBy、正则表达式v标志
PHP trim 函数对多字节字符的使用和限制
新函数 json_validate() 、randomizer 类扩展…20 个PHP 8.3 新特性全面解析
使用HTMX为WordPress增效:如何在不使用复杂框架的情况下增强平台功能
为React 19做准备:WordPress 6.6用户指南
如何删除WordPress中的所有评论

发布评论