티스토리 뷰
화면을 통해 소방서 정보를 등록하면 DB 속에는 잘 들어가는 것을 확인할 수 있다.
오류
vue 서버에서는 성공이라고 뜨지만 Spring Security에 걸려 이런 화면으로 넘어간다
[Vue.js]
methods: {
submitForm3: function() {
const url = 'http://localhost:7777/auth/loginProc'
const data = {
firestationname: this.firestationname,
firestationPw: this.firestationPw
}
axios.post(url, data)
.then(function(response) {
console.log(response)
alert('성공')
// window.location.href = 'http://localhost:7777/admin/list'
})
.catch(function(error) {
console.log(error)
alert('실패')
})
}
}[Spring]
@Override
protected void configure(HttpSecurity http) throws Exception {
http
.httpBasic().disable()
.cors().configurationSource(corsConfigurationSource())
.and()
.csrf().disable()
.sessionManagement().sessionCreationPolicy(SessionCreationPolicy.STATELESS)
.and()
.authorizeRequests()
.antMatchers("/", "/auth/**", "/css/**", "/js/**").permitAll()
.antMatchers(HttpMethod.PUT, "/put/**").hasAnyRole("USER")
.antMatchers(HttpMethod.POST, "/post/**").hasAnyRole("USER")
.antMatchers(HttpMethod.GET, "/get/**").hasAnyRole("USER")
.antMatchers("/admin/**").hasAnyRole("ADMIN")
.anyRequest()
.authenticated()
.and()
.formLogin()
.loginPage("/auth/loginForm") // 로그인 페이지
.loginProcessingUrl("/auth/loginProc")
.defaultSuccessUrl("/")
.failureUrl("/auth/loginForm")
.and()
.addFilterBefore(new JwtAuthenticationFilter(jwtTokenProvider),
UsernamePasswordAuthenticationFilter.class);
}
내 생각
보내는 메소드를 보면 Spring 에서 loginProcessingUrl("/auth/loginProc") 와 동일하지만 FormLogin 의 로그인 페이지가 달라서 생기는 오류인 것 같다.
templates/loginForm
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div class="container">
<form action="/auth/loginProc" method="post">
<div class="form-group">
<label for="username">Username : </label>
<input type="text" name="username" class="form-control" placeholder="Enter username" id="username">
</div>
<div class="form-group">
<label for="password">Password:</label>
<input type="password" name="password" class="form-control" placeholder="Enter password" id="password">
</div>
<button id="btn-login" class="btn btn-primary">로그인</button>
</form>
</div>
</body>
</html>
따로 loginForm 을 만들어 form action을 이용하여 POST 함으로서 오류를 해결했다.
DB 값과 비교하여 로그인/ 로그인 실패까지는 성공했지만 로그인이 되었을 때 접근 권한의 설정이 잘못 된 것 같다.
'🌱 프로젝트 > 소방알리미' 카테고리의 다른 글
| Vue Framework에서 Build 하기 - 소방서 알림 #6 (0) | 2022.09.18 |
|---|---|
| Firestation Spring - 소방서 알림 #5 (0) | 2022.09.17 |
| 로그인 오류 2 - 소방서 알림 #4 (0) | 2022.09.14 |
| 시큐리티 설정 - 소방서 알림 #2 (0) | 2022.09.08 |
| 미니 프로젝트 - 소방서알림 #1 (0) | 2022.09.06 |