[Javascript/vue] form태그 순환참조 문제 (preventDefault, @click)

문제상황

- 로그인 버튼 클릭 -> 정상적으로 jwt토큰을 통한 인증이 진행 성공 -> 로그인 페이지 response값 정상 return -> 하지만 여기서 로그인 페이지가 새로고침 되면서 문제가 발생

- authenticat API는 계속 pending되고 페이지는 계속 새로고침이 되고 있다.

 

 

해결 방안

- form태그에서 @click을 쓸 경우 순환 참조가 일어난다. 이에 preventDefault로 방지하거나 form 태그를 사용하면 안된다.

 

개요

vue.js로 사이드 프로젝트를 진행중입니다. 로그인 페이지는 제외하고 작업하는 도중 로그인을 통한 인증/인가가 필요하게 되어 로그인 페이지를 구현했습니다.

 

인증 방식은 jwt 토큰 방식으로, spring security에서 secret키를 이용해 token을 생성 인증된 유저에 대해 토큰 정보를 return response 해주는 형태입니다.

 

 

작성한 코드 

<template>
    <div class="login">
        <div>
          <h1 class="logo">
                <img src="/images/logo.png" alt="" />
            </h1>
            <form 
                action=""
                @submit="checkLogin"
                method="post"
            >
                <p v-if="errors.length">
                    <b>Please correct the following error(s):</b>
                    <ul>
                    <li v-for="error in errors" v-bind:key="error">{{ error }}</li>
                    </ul>
                </p>
                <p>
                    <input
                    class="formInput"
                    id="userId"
                    v-model="userId"
                    type="text"
                    name="userId"
                    placeholder="로그인 아이디"
                    >
                </p>
                <p>
                    <input
                    class="formInput"
                    id="password"
                    v-model="password"
                    type="password"
                    name="password"
                    placeholder="비밀번호"
                    >
                </p>
                <p>
                    <input
                    class="button"
                    style="margin-bottom : 2vh; font-size:small; font-weight: bolder;"
                    value="비밀번호를 잊으셨나요?"
                    >
                </p>
                <p>
                    <input
                    class="buttonBackground"
                    style="width: 41vh; height : 4.5vh;"
                    type="submit"
                    value="로그인"
                    >
                </p>
            </form>
        </div>
    </div>
    
</template>
 
<script>
import { mapActions } from 'vuex'
 
export default {
    data() {
        return {
            errors: [],
            userId: '',
            password: ''
        }
    },
    methods: {
        ...mapActions('auth', ['login']),
        async checkLogin() {
            this.login({
                userId : this.userId,
                password : this.password
            })
            return true
        }
    }
}
</script>
 

 

아래와 같이 Postman으로 API 통신 테스트 및 response 정보를 확인했습니다. 그 결과는 통과!

정상적으로 토큰값와 status값을 가져오는것을 확인했습니다.

 

해결한 방법

추후 작성

 

 

참고 : 

https://studyingych.tistory.com/27

event.preventDefault()로 submit 이벤트 발생시 reload 안하기