前后端星散下用jwt做用户认证

0 前后端星散下的用户信息认证

前端使用Vue+axios,后端使用SpringBoot+SpringSecurity。

为了解决http无状态的问题,我接纳jwt(json web token)保留用户信息,前端每次提议请求时带上,交给后端做用户认证。此时需要解决的问题是后端如何将天生的jwt返回前端,以及前端在拿到jwt后如何在每次请求时携带jwt。

1 后端校验用户乐成以后,将天生的token写到响应头里

response.addHeader("Authorization", "Bearer " + jwt);

jwt就是自己天生的token,是String类型。

<!-- jwt依赖 -->
<dependency>
    <groupId>io.jsonwebtoken</groupId>
    <artifactId>jjwt</artifactId>
    <version>0.9.0</version>
</dependency>
// 完整代码

/**
 * 登录验证
 * 登录乐成就天生token并放入响应头
 */
public class JwtLoginFilter extends UsernamePasswordAuthenticationFilter {

    private AuthenticationManager authenticationManager;

    public JwtLoginFilter(AuthenticationManager authenticationManager) {
        this.authenticationManager = authenticationManager;
    }

    private static final Logger logger
            = LoggerFactory.getLogger(JwtLoginFilter.class);

    // 省略了重写的attemptAuthentication()
    
    @Override
    protected void successfulAuthentication(HttpServletRequest request,
                                            HttpServletResponse response,
                                            FilterChain chain,
                                            Authentication authResult)
            throws IOException, ServletException {
        // 获取用户角色
        Collection<? extends GrantedAuthority> authorities = authResult.getAuthorities();
        // 我的数据库设计了一个用户只会有一个角色
        Iterator<? extends GrantedAuthority> iterator = authorities.iterator();
        String role = "";
        if (iterator.hasNext()) {
            role = iterator.next().getAuthority();
        }

        // 天生token
        String jwt = Jwts.builder()
                //设置用户角色
                .claim("authorities", role)
                .setSubject(authResult.getName())
                //过时时间,一小时
                .setExpiration(new Date(System.currentTimeMillis() + 60 * 60 * 1000))
                .signWith(SignatureAlgorithm.HS512, "密钥")
                .compact();

        //将token写到响应头里
        response.addHeader("Authorization", "Bearer " + jwt);
        // 自定义方式,给响应设置状态码等
        ResponseDataUtil.setDataInResponse(response,
                null,
                HttpStatusEnum.SUCCESSFUL,
                true);
    }
}

2 后端开启设置,使前端可以获取到响应头里的token

/**
 * 设置cors,解决前端接见后端的跨域资源问题
 */
@Configuration
public class WebMvcConfig implements WebMvcConfigurer {
    @Override
    public void addCorsMappings(CorsRegistry registry) {
        registry.addMapping("/**")
                //设置了前端的地址
                .allowedOrigins("http://localhost:10011")
                .allowedMethods("GET", "POST", "DELETE", "PUT", "OPTIONS", "HEAD")
                .allowedHeaders("*")
                //将请求头里保留的token暴露出来给前端获取
                .exposedHeaders("Authorization");
    }
}

重点是调用了exposedHeaders(),否则前端无法获取到响应头中键为Authorization的值。

现在,登录请求的响应头中已经增加了保留着token的Authorization。

Java中常用的七个壅闭行列第二篇DelayQueue源码先容

前后端星散下用jwt做用户认证

3 前端在登录方式的回调函数内里获取响应头里的token

login() {
      // 对表单数据的有用性举行验证
      this.$refs.loginFormRef.validate(async valid => {
        if (!valid) return
        // 表单数据有用,发送请求
        const data = await this.$request.postWithBody('login', this.loginForm)
        if (data.successful) {
          // 将token保留到内陆
          window.sessionStorage.setItem('jwt', data.token)
          this.$router.push('/home')
        }
      })
    }

this.$request.postWithBody('login', this.loginForm)是我自己封装的axios方式,用于发送post请求。固然完全可以用原生额axios的post方式。

window.sessionStorage.setItem('jwt', data.token)将从后台返回的token保留在内陆。其中jwt是这个键值对的键,可以凭据自己的习惯命名。

4 前端axios设置请求阻挡器,给每个请求加上token

// 请求阻挡器
axios.interceptors.request.use(request => {
  // 显示进度条
  Nprogress.start()
  request.headers.Authorization = window.sessionStorage.getItem('jwt')
  return request
})

这一步可以将前端发送的每一个请求都阻挡下来,并在请求头里添上第3步中获取到的jwt。

5 效果

前后端星散下用jwt做用户认证

此时,前端发送的请求中,已经在请求头加入了jwt,后端收到请求后,将请求头里的token取出举行剖析,完成用户认证。

本文由博客群发一文多发等运营工具平台 OpenWrite 公布

原创文章,作者:2d28新闻网,如若转载,请注明出处:https://www.2d28.com/archives/5863.html