Vue 에서 로그인을 이야기하기 전
Spring 에서 어떻게 로그인을 구현해두었는지 먼저 살펴보자면
아이디와 패스워드를 입력바아 체크하고 jwt 토큰을 반환하는 메서드로 구성하였다.
이 토큰에는 멤버의 id 와 이메일, 멤버등급이 저장되도록 한다.
vue 에서 로그인 버튼은 아래처럼 클릭시 signIn 함수를 호출하도록 하였고,
<button type="button" @click="signIn">로그인</button>singIn 함수는 다음고 같이 구현하였다.
const signIn = async () => {
try {
const response = await axios.post('http://localhost:8080/members/login', {
email: email,
password: password
});
// 로그인 성공 시 처리
const token = response.data.token; // 토큰 추출
localStorage.setItem('token', token); // 토큰 로컬 스토리지에 저장
await router.push('/eventList');
location.reload();// 이벤트 목록 페이지로 이동
} catch (error) {
// 로그인 실패 시 처리
console.error(error);
}
}axios 를 통해 post맵핑된 API ( "/members/login" ) 을 호출한다.
이때 axios 는 설정한 엔드포인트로 파라미터를 전달하고, 응답을 받아오는 역할을 해준다. ( + 응답은 보통 json 형태로 가져오게 되는데 axios 는 이를 바로 사용할 수 있는 데이터로 가져와준다. 이는 fetch() 를 사용하는 것 보다 간편하다! )
data class LoginResponse( val token: String ) // 응답 데이터가져온 데이터에서 token 값을 로컬 스토리지에 'token'이란 이름으로 저장하게 되는데 이 로컬 스토리지는 클라이언트에 브라우저에 저장되는 공간으로 키-값으로 저장할 수 있다. 이후 다른 곳에서 토큰정보가 필요해지면 getItem('token')을 통해 가져올 수 있다.
( + 'token' 이란 키로 저장되기 때문에 로그아웃처리 없이 다른 사용자가 중간에 새로 로그인하였을때 덮어씌워지게 되는데, 이를 유지하고 싶다면 키 값을 시간값이나 별도의 방법을 통해 저장해주면 된다. )
이후 토큰안에 저장된 id, 이메일, 닉네임, 역할 등의 정보가 필요할 땐 별도의 변환과정이 필요하다. jwt 토큰은 Base64 로 인코딩 되어있어 이를 Decode 해줄 수 있는 라이브러리 jsonwebtoken 을 설치해야한다. ( npm install jsonwebtoken )
import jwt_decode from 'jsonwebtoken';
const decodedToken = jwt_decode(token);
const userId = decodedToken.userId;
const email = decodedToken.email;
const nickname = decodedToken.nickname;
const role = decodedToken.role;이후 jwtDecode() 메서드를 통해 토큰을 분석하고나면 내부의 각 속성에 접근하여 사용할 수 있게 된다!
