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

登录认证

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属性我分成了两类：USER和ADMIN。

getAuthorities方法实现如下：

public Collection