// 🔆 compision API 에서 axios 사용 (중요 까먹지 말것))
const handleLogin = async () => {
try {
const response = await axios.post("/login", {
username: username.value,
password: password.value
}, {
headers: { "Content-Type" : "application/json" },
});
store.dispatch('login', response.headers['authorization']);
} catch (error) {
console.log('handleLogin error', error);
}
}
항상 옵션 API 만 사용하다가 이번 프로젝트에서 대부분의 vue 라이프 사이클을 컴포지션 Api 로 구현 하게 되었다
로그인한 사용자의 아이디와 비밀번호를 서버로 post 요청 하기 위한 Api 이다.
(* store actions 도 컴포지션 스타일로 적용)
<form role="form" @submit.prevent="handleLogin">
<div class="mb-3">
<argon-input
id="username"
type="text"
v-model="username"
placeholder="계정명을 입력해주세요"
name="username"
size="lg"
/>
</div>
<div class="mb-3">
<argon-input
id="password"
type="password"
v-model="password"
placeholder="비밀번호를 입력해주세요"
name="password"
size="lg"
/>
</div>
<argon-switch id="rememberMe" name="remember-me"
>로그인 상태 유지</argon-switch
>
<div class="text-center">
<argon-button
class="mt-4"
variant="gradient"
color="success"
fullWidth
size="lg"
>로그인</argon-button
>
</div>
</form>
먼저 로그인할 사용자 아이디 (username) 과 비밀번호 (password) 를 @submit.prevent() 를 통해 메서드로 전송한다.
1. 컴포지션 Api 에서 해당 데이터를 메서드에서 받기 위해 vue 에서 제공하는 ref 를 import 하였다.
2. vuex 저장을 위해 vuex 의 useStroe 로 임포트해준다.
import { onBeforeUnmount, onBeforeMount, ref} from "vue";
import { useStore } from "vuex";
const store = useStore();
userStore() 객체는 store 라는 변수를 사용하여 vuex 에 있는 mutations 와 actions 내부에 정의한 메서드를 사용한다.
그리고 메서드로 username 과 password 를 전달 하기 전 ref 변수로 각각의 변수를 초기화 한다.
const username = ref('');
const password = ref('');
** handleLogin() : 로그인을 위해 사용자가 입력한 username, password 를 서버로 전송할 메서드
// 🔆 compision API 에서 axios 사용 (중요 까먹지 말것))
const handleLogin = async () => {
try {
const response = await axios.post("/login", {
username: username.value,
password: password.value
}, {
headers: { "Content-Type" : "application/json" },
});
store.dispatch('login', response.headers['authorization']);
} catch (error) {
console.log('handleLogin error', error);
}
}
위의 메서드에서 username.value, password.value 를 선언
** value 선언 이유 : ref 로 선언한 변수는 .value 를 통해 실제 데이터에 접근한다. ref() 는 반응형 객체이기 때문에 내부 실제 값은 value 를 통해 접근해야 한다. (<template> 태그 내부에서는 .value 생략 가능 ex) <p>{{ username }}</p> )
(** vuex actions 에 선언한 login 은 응답받은 엑세스 토큰을 vuex 에 저장)
actions: {
toggleSidebarColor({ commit }, payload: string) {
commit("sidebarType", payload);
},
login({ commit }, token) {
commit("setAccessToken", token);
},
logout({ commit }) {
commit("clearAccessToken");
}
},
getters: {},
});
해당 login으로 정의한 actions 를 상단에 정의한 객체 store.dispatch() 를 통해 헤더에서 응답받은 토큰을 저장한다.
store.dispatch('login', response.headers['authorization']);
