maybetomorrow
96
2019-04-11 19:10:45
4
655

spring boot + vue.js 로그인 관련해서 여쭤보고 싶습니다.


스프링 부트를 api 서버로, vue를 프론트단으로 해서 프로젝트를 진행하고 있는데..

기본적인 api 요청은 되는데, 로그인 처리를 도저히 할 수 가 없습니다.

spring boot security 사용중 인데 왜 401 error가 나는지 도저히 모르겠습니다.

혹시 spring boot + vue로 로그인 처리한 참고할 만한 예제나.. 원인을 알려주시면 정말 감사드립니다.

며칠 째 혼자 해보다가 안되서 올립니다.


로그인 요청, 시큐리티 설정 소스입니다.

에러메시지는 401 error로 포스트 요청을 처리하지 못하고 있습니다..


<script>
export default {
name: "Login",
data() {
return {
loginId: '',
loginPassword: ''
}
},
methods:{
Login(e){
this.$http.post('/login', {
password: this.password,
email: this.email
}).then(function (response) {
if (response.status === 200) {
console.log("data통신 성공")
}
}, function (err) {
console.log('err', err)
})
}
}
}
</script>
@Configuration
@RequiredArgsConstructor
public class SecurityConfig extends WebSecurityConfigurerAdapter {

private final CustomUserDetailService customUserDetailService;
private final RestAuthenticationEntryPoint restAuthenticationEntryPoint;
private final AuthSuccessHandler authSuccessHandler;
private final AuthFailerHandler authFailerHandler;
private final HttpLogoutSuccessHandler logoutSuccessHandler;
private final UserDetailsService userDetailsService;

@Bean
public PasswordEncoder passwordEncoder() {
return new BCryptPasswordEncoder();
}

@Override
protected void configure(AuthenticationManagerBuilder auth) throws Exception {
auth.userDetailsService(userDetailsService).passwordEncoder(passwordEncoder());
}

@Override
protected void configure(HttpSecurity http) throws Exception {
http.exceptionHandling().authenticationEntryPoint(restAuthenticationEntryPoint);
http.cors().configurationSource(request -> new CorsConfiguration().applyPermitDefaultValues())
.and()
.authorizeRequests()
.antMatchers("/**").permitAll()
.antMatchers(HttpMethod.OPTIONS,"/api/**").permitAll()
.antMatchers(HttpMethod.GET,"/**").permitAll()
.antMatchers(HttpMethod.POST,"/**").permitAll()
.anyRequest().authenticated()
.and()
.formLogin() // 사용자가 정의하는 로그인 화면을 만들겠다.
.loginProcessingUrl("/api/login") // 로그인 화면
//.loginPage("/account/login") // 사용자가 입력한 id, password가 전달되는 url경로(필터가처리)
.usernameParameter("loginId")
.passwordParameter("loginPassword")
.successHandler(authSuccessHandler)
.failureHandler(authFailerHandler)
.and()
.logout()
.logoutRequestMatcher(new AntPathRequestMatcher("/logout"))
.logoutSuccessHandler(logoutSuccessHandler)
.and()
.csrf().disable();
}
}
0
0
  • 댓글 4

  • 초무쿤
    2k
    2019-04-11 20:42:44

    의심되는 부분이 

    1)

    화면단에서

    this.$http.post('/login', {

    security설정단에서 

    .loginProcessingUrl("/api/login") // 로그인 화면
    URL이 다른게 맞는건지 모르겠구요.

    2)

    위가 맞다면 ant 패턴이면 /**/* 런 식으로 해야 먹지 않을건지 싶은데..

    한번 테스트 해보시고 알려주십시요.



    0
  • codepresso
    77
    2019-04-11 22:27:58

    여러가지 복잡한 문제가 얽혀있을수도 있습니다.

    일단 스프링 시큐리티 설정에서 loginProcessingUrl인 /api/login으로 요청을 보냈을때 application/json또는 form형태로 전달됬을때 userDetails로 잘 전달되는지 디버깅으로 체크해야 합니다. 

    또 username,password 파라미터를 loginId,loginPassword로 설정하셨는데 해당 key값에 맞추어 전달해야합니다.

    위 코드에서는 email과 passwod로 되있네요..

    0
  • gotogoto
    125
    2019-04-12 16:10:44

    토큰 요청을 위해 설정이 되어있어야 하지 않나요?

    .antMatchers("/oauth/token").permitAll()
    0
  • maybetomorrow
    96
    2019-04-12 17:47:10

    @초무쿤

    일단 url 문제는 아니었고, vue에서 form data로 보내지 않고 json 데이터 형식으로 보낸게 첫번째 문제였습니다. 두번째는 parameter 이름을 설정을 바꾸다가 깜빡하고 안바꿨습니다..

    @codepresso 

    답변 정말 감사합니다. 이글 읽고 참고해서 해결했습니다 ㅠㅠ

    0
  • 로그인을 하시면 댓글을 등록할 수 있습니다.