Springboot+SpringSecurity+JWT +Vue实现前后端分离的登录 权限管理以及token管理

Springboot+SpringSecurity+JWT +Vue实现前后端分离的登录 权限管理以及token管理

前言
使用SpringSecurity+jwt组合对用户的权限以及token进行管理，用户在成功登陆后，会分发一个token令牌，如果没有将某个接口进行权限设置，那么访问该页面时需要带着token令牌进行访问，后端将会对token令牌进行校验，如果校验通过则可以对该接口进行请求。

整体思路：
1.导入springSecurity跟jwt的maven依赖
2.用户登录的实体类（这里就不详细说明mapper和service）
3.实现UserDetailsService接口
4.JwtUser实现UserDetails接口
5.JwtTokenUtils工具类
6.验证用户登录信息的拦截器（JWTAuthenticationFilter）
7.验证用户权限的拦截器（JWTAuthorizationFilter）
8.springSecurity配置
9.认证的Controller
10.前端vue进行测试（跨域可以在博主的其他文章中查看）

1.导入springSecurity跟jwt的maven依赖

	<!--springSecuriy-->
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-security</artifactId>
        </dependency>
        
	<!--jwt-->
	<dependency>
    		<groupId>io.jsonwebtoken</groupId>
    		<artifactId>jjwt</artifactId>
    		<version>0.9.1</version>
	</dependency>

2.用户登录的实体类

@Data
@EqualsAndHashCode(callSuper = false)
@Accessors(chain = true)
@ApiModel(value="User对象", description="")
public class User  {

    private static final long serialVersionUID = 1L;

    @TableId(value = "uid", type = IdType.AUTO)
    private Long uid;

    private String username;

    private String password;

    private String role;
}

3.实现UserDetailsService接口
这里使用的是mybatisplus对数据库进行访问，在博主其他文章中也有笔记

@Service
public class UserServiceImpl  implements  UserDetailsService {

    @Autowired
    private UserMapper userMapper;
    // 用户登录逻辑和验证处理
    @Override
    public UserDetails loadUserByUsername(String s) throws UsernameNotFoundException {
        //将用户传来的名字进行后缀判断角色
        JwtUser jwtUser = null;
        QueryWrapper<Student> wrapper = new QueryWrapper<>();
        wrapper.eq("username",s);
        User user = studentMapper.selectOne(wrapper);
	return new JwtUser(user);
    }
}

4.JwtUser实现UserDetails接口

public class JwtUser implements UserDetails {

    private Long id;
    private String username;
    private String password;
    private Collection<? extends GrantedAuthority> authorities;

    public JwtUser() {
    }

    public JwtUser(User user) {
        id = user.getUid();
        username = user.getUsername();
        password = user.getPassword();
        //这里说明一下，必须要加上ROLE_开头，或者在数据库直接以这个开头
        authorities = Collections.singleton(new SimpleGrantedAuthority("ROLE_"+user.getRole()));
    }

    // 获取权限信息
    @Override
    public Collection<? extends GrantedAuthority> getAuthorities() {
        return authorities;
    }

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

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

    // 账号是否未过期，默认是false，记得要改一下
    @Override
    public boolean isAccountNonExpired() {
        return true;
    }

    // 账号是否未锁定，默认是false，记得也要改一下
    @Override
    public boolean isAccountNonLocked() {
        return true;
    }

    // 账号凭证是否未过期，默认是false，记得还要改一下
    @Override
    public boolean isCredentialsNonExpired() {
        return true;
    }

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

 }

5.JwtTokenUtils工具类
用于设置token过期时间，以及token的前缀等

public class JwtTokenUtils {
    public static final String TOKEN_HEADER = "Authorization";
    public static final String TOKEN_PREFIX = "Bearer ";
    private static final String SECRET = "jwtsecretdemo";
    private static final String ISS = "echisan";

    // 角色的key
    private static final String ROLE_CLAIMS = "rol";

    // 过期时间是3600秒，既是1个小时
    private static final long EXPIRATION = 3600L;

  
    // 创建token
    public static String createToken(String username,String role) {

        long expiration =EXPIRATION;
        HashMap<String, Object> map = new HashMap<>();
        map.put(ROLE_CLAIMS, role);
        return Jwts.builder()
                .signWith(SignatureAlgorithm.HS512, SECRET)
                .setClaims(map)
                .setIssuer(ISS)
                .setSubject(username)
                .setIssuedAt(new Date())
                .setExpiration(new Date(System.currentTimeMillis() + expiration * 1000))
                .compact();

    }

    // 从token中获取用户名
    public static String getUsername(String token){
        return getTokenBody(token).getSubject();
    }

    // 获取用户角色
    public static String getUserRole(String token){
        return (String) getTokenBody(token).get(ROLE_CLAIMS);
    }

    // 是否已过期
    public static boolean isExpiration(String token) {
        try {
            return getTokenBody(token).getExpiration().before(new Date());
        } catch (ExpiredJwtException e) {
            return true;
        }
    }

    private static Claims getTokenBody(String token){
        return Jwts.parser()
                .setSigningKey(SECRET)
                .parseClaimsJws(token)
                .getBody();
    }

}

6.验证用户登录信息的拦截器（JWTAuthenticationFilter）

//进行用户账号的验证
public class JWTAuthenticationFilter extends UsernamePasswordAuthenticationFilter {
    private AuthenticationManager authenticationManager;

    public JWTAuthenticationFilter(AuthenticationManager authenticationManager) {
        this.authenticationManager = authenticationManager;
        //设置登录请求的url
        super.setFilterProcessesUrl("/login");
    }

    @SneakyThrows
    @Override
    public Authentication attemptAuthentication(HttpServletRequest request,

          HttpServletResponse response) throws AuthenticationException{

        // 从输入流中获取到登录的信息
        try {
            LoginUser loginUser = new ObjectMapper().readValue(request.getInputStream(), LoginUser.class);
            return authenticationManager.authenticate(
                    new UsernamePasswordAuthenticationToken(loginUser.getUsername(), loginUser.getPassword(), new ArrayList<>()));

	//密码错误时抛出异常		
        }catch (BadCredentialsException b){
            System.out.println("密码错误");
            try {
                response.setCharacterEncoding("UTF-8");
                response.setContentType("application/json; charset=utf-8");
                response.setStatus(HttpServletResponse.SC_UNAUTHORIZED);
                response.getWriter().write("密码错误");
            } catch (IOException e) {
                e.printStackTrace();
            }
            return null;
        //无此用户时抛出异常
        }catch (InternalAuthenticationServiceException i){
            System.out.println("没有此用户");
            response.setCharacterEncoding("UTF-8");
            response.setContentType("application/json; charset=utf-8");
            response.setStatus(HttpServletResponse.SC_UNAUTHORIZED);
            response.getWriter().write("xxx");
            return null;
        }

        catch (Exception e) {
            e.printStackTrace();
            return null;
        }
    }

    // 成功验证后调用的方法
    // 如果验证成功，就生成token并返回
    @Override
    protected void successfulAuthentication(HttpServletRequest request,
                                            HttpServletResponse response,
                                            FilterChain chain,
                                            Authentication authResult) throws IOException, ServletException {
        System.out.println("登录成功");
        JwtUser jwtUser = (JwtUser) authResult.getPrincipal();
        System.out.println("jwtUser:" + jwtUser.toString());
        String role = "";
        Collection<? extends GrantedAuthority> authorities = jwtUser.getAuthorities();
        for (GrantedAuthority authority : authorities) {
            role = authority.getAuthority();
        }
        String token = JwtTokenUt）ils.createToken(jwtUser.getUsername(), role);
        // 返回创建成功的token
        // 但是这里创建的token只是单纯的token
        // 按照jwt的规定，最后请求的时候应该是 `Bearer token`
        System.out.println(token)；
        response.setHeader("token", JwtTokenUtils.TOKEN_PREFIX + token);
	//这里我还将该用户的id进行返回了
        response.setIntHeader("uid",jwtUser.getUid().intValue());
    }
    //配置失败返回的信息，当然成功的也可以返回思路一样，重写successful，这里我就不写了
    @Override
    protected void unsuccessfulAuthentication(HttpServletRequest request, HttpServletResponse response, AuthenticationException failed) throws IOException, ServletException {
	    System.out.println("用户登陆失败  AjaxAuthFailHandler");
	    response.setContentType("application/json;charset=utf-8");
	    response.setStatus(HttpStatus.UNAUTHORIZED.value());
	    PrintWriter out = response.getWriter();
	    out.write("{\"status\":\"error\",\"msg\":\"请检查用户名、密码或验证码是否正确\"}");
	    out.flush();
	    out.close();
    }
	
	
}

7.验证用户权限的拦截器（JWTAuthorizationFilter）
进行用户账号的验证（查看是否有token，token是否正确，token是否过时）

//进行用户账号的验证
public class JWTAuthorizationFilter extends BasicAuthenticationFilter {
    public JWTAuthorizationFilter(AuthenticationManager authenticationManager) {
        super(authenticationManager);
    }

    @Override
    protected void doFilterInternal(HttpServletRequest request,
                                    HttpServletResponse response,
                                    FilterChain chain) throws IOException, ServletException {
        String tokenHeader = request.getHeader(JwtTokenUtils.TOKEN_HEADER);
        // 如果请求头中没有Authorization信息则直接放行了
        if (tokenHeader == null || !tokenHeader.startsWith(JwtTokenUtils.TOKEN_PREFIX)) {
            chain.doFilter(request, response);
            return;
        }
        // 如果请求头中有token，则进行解析，并且设置认证信息
        try {
            SecurityContextHolder.getContext().setAuthentication(getAuthentication(tokenHeader));
        } catch (TokenIsExpiredException e) {
            //返回json形式的错误信息
            response.setCharacterEncoding("UTF-8");
            response.setContentType("application/json; charset=utf-8");
            response.setStatus(HttpServletResponse.SC_FORBIDDEN);
            String reason = "统一处理，原因：" + e.getMessage();
            response.getWriter().write(new ObjectMapper().writeValueAsString(reason));
            response.getWriter().flush();
            return;
        }
        super.doFilterInternal(request, response, chain);
    }

    // 这里从token中获取用户信息并新建一个token
    private UsernamePasswordAuthenticationToken getAuthentication(String tokenHeader) throws TokenIsExpiredException {
        String token = tokenHeader.replace(JwtTokenUtils.TOKEN_PREFIX, "");
        boolean expiration = JwtTokenUtils.isExpiration(token);
        if (expiration) {
            throw new TokenIsExpiredException("token超时了");
        } else {
            String username = JwtTokenUtils.getUsername(token);
            String role = JwtTokenUtils.getUserRole(token);
            if (username != null) {
                return new UsernamePasswordAuthenticationToken(username, null,
                        Collections.singleton(new SimpleGrantedAuthority(role))
                );
            }
        }
        return null;
    }
}

8.springSecurity的配置

@Configuration //配置类
@EnableWebSecurity
@EnableGlobalMethodSecurity(prePostEnabled = true)
public class SpringSecurityConf extends WebSecurityConfigurerAdapter {
    @Autowired
    UserServiceImpl userService;

    //定义登陆成功返回信息
    private class AjaxAuthSuccessHandler extends SimpleUrlAuthenticationSuccessHandler {
        @Override
        public void onAuthenticationSuccess(HttpServletRequest request, HttpServletResponse response, Authentication authentication) throws IOException, ServletException {
            System.out.println("用户[" + SecurityContextHolder.getContext().getAuthentication().getPrincipal() +"]登陆成功！");
            response.setContentType("application/json;charset=utf-8");
            PrintWriter out = response.getWriter();
            out.write("{\"status\":\"ok\",\"msg\":\"登录成功\"}");
            out.flush();
            out.close();

        }
    }
    //定义登陆失败返回信息
    private class AjaxAuthFailHandler extends SimpleUrlAuthenticationFailureHandler {
        @Override
        public void onAuthenticationFailure(HttpServletRequest request, HttpServletResponse response, AuthenticationException exception) throws IOException, ServletException {
            System.out.println("用户登陆失败  AjaxAuthFailHandler");
            response.setContentType("application/json;charset=utf-8");
            response.setStatus(HttpStatus.UNAUTHORIZED.value());
            PrintWriter out = response.getWriter();
            out.write("{\"status\":\"error\",\"msg\":\"请检查用户名、密码或验证码是否正确\"}");
            out.flush();
            out.close();
        }
    }

    //请求授权验
    @Override
    protected void configure(HttpSecurity http) throws Exception {

        // .denyAll();    //拒绝访问
        // .authenticated();    //需认证通过
        // .permitAll();    //无条件允许访问
        // 跨域一定要加上csrf();
        // 访问权限

        http.cors().and().csrf().disable().authorizeRequests()
                .antMatchers("/tologin","/islogin","/register","/registererr").permitAll()

                //.antMatchers("/User").hasRole("USER")
                // .antMatchers("/Admin").hasRole("ADMIN")
                .anyRequest().authenticated()
                .and()
                .addFilter(new JWTAuthenticationFilter(authenticationManager()))
                .addFilter(new JWTAuthorizationFilter(authenticationManager()))
                 //不需要session
                .sessionManagement().sessionCreationPolicy(SessionCreationPolicy.STATELESS);


         //登录配置
        http.formLogin()
                .successHandler(new AjaxAuthSuccessHandler())
                .failureHandler(new AjaxAuthFailHandler())
                //固定名字，其实默认也是username跟password，这里也可以不写
                .usernameParameter("username")
                .passwordParameter("password")
                //设置自己的登录界面（如果不设置，将会是自带的登录界面这里我们使用自定义的登录界面）
                .loginPage("/tologin")
                //表单提交的url
                .loginProcessingUrl("/login"); 

    }
    // 用户授权验证
    @Override
    protected void configure(AuthenticationManagerBuilder auth) throws Exception {
        auth
                .userDetailsService(userService)
                .passwordEncoder(passwordEncoder()
                );

    }

    @Bean
    CorsConfigurationSource corsConfigurationSource() {
        final UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource();
        source.registerCorsConfiguration("/**", new CorsConfiguration().applyPermitDefaultValues());
        return source;
    }




    // 这里采用雪花加密方式对密码进行加密解密
    @Bean
    public PasswordEncoder passwordEncoder(){
        return new BCryptPasswordEncoder();
    }
}

9.认证的Controller

//单跨域的使用
@CrossOrigin
@Controller
public class PageController {
    @GetMapping("/tologin")
    public String tologin(){
        return "redirect:http://localhost:8001/Login";
    }
}

10.前端vue进行测试
这里需要有一点vue的基础， Vue这里不会详细讲用法了，但是会讲我是如何保存token，携带token发送请求的，这里我发送请求用的是axios，关于vue跨域配置等后期可能会写一篇相关的文章。
Login.vue
只给到了发送请求的地方，这里我将得到的token以及uid都存放到session中

var data = JSON.stringify(that.loginForm);
console.log(that.loginForm.username)           
this.$axios          
.post(url, data)          
.then(function (res) {            
	//登录成功后,将后端给的token以及uid都存在session中            
	window.sessionStorage.setItem("token", res.headers.token);
	window.sessionStorage.setItem("uid",res.headers.uid);
	that.$message.success("登陆成功");                       
}).catch((err) => {            
//账号或密码有误时            
var code = err.response.status;	
	return this.$message.error("登录失败！账号或密码错误");
                   
});

main.js
这里从session中获取token，并放到axios的请求头中，后面使用axios的请求都会自动带上token

//vue 的main.js中配置
//给axios请求设置默认的token请求头
const token = window.sessionStorage.getItem("token");
axios.defaults.headers['Content-Type'] = 'application/json;charset=utf-8'；
axios.defaults.headers['Authorization'] = token;
axios.defaults.headers.post['Content-Type'] = 'text/plain'；
Vue.prototype.$axios = axios;

记录我的学习笔记