Vue로 로그인을 어떻게 구현할 것인가
이 과정을 아래의 PPT로 정리해보았다.
JWT 인증 과정의 사진 출처:https://tansfil.tistory.com/59
Django로만 개발할 때는 accounts 생성하는 것은 어렵지 않았다. 기본적으로 Django에서 지원해주기 때문이다.
그러나 프론트와 백이 분리되면 이를 기본적으로 지원해주지 않는다.
따라서 클라이언트(프론트)에서 서버(백)으로 요청을 보냈을때 그 요청이 정당한지 인증을 요구하는데 이러한 인증 방식중 한가지가 JWT(JSON Web Token)이다.
JWT에 대한 자세한 개념은 생략하고 바로 본론으로 들어가자
로그인 로직을 요약하면 아래와 같다.
(프론트) 1. 유저가 로그인을 시도하여 ID, PW의 정보를 담아 서버로 로그인 요청
(백엔드) 2. ID,PW를 판단하고 적합한 경우 토큰을 프론트로 응답
(프론트) 3. 토큰을 응답받으면 이 토큰으로 다시 유저 정보를 요청
(백엔드) 4. 토큰에 해당하는 유저 정보를 반환
(프론트) 5. 유저 정보를 불러온 후 로그인 처리일반적으로 토큰은 요청의 Header에 담긴다
그럼 차례대로 코드와 함께 보겠다.
1. 유저가 로그인을 시도하여 서버로 로그인을 요청
## Login.Vue
<template>
<div>
<h1 class="form-title">로그인</h1>
<div class="input-wrap">
<label for="email">이메일</label>
<input type="email" id="email" v-model="email" class="input-text"/>
</div>
<div class="input-wrap">
<label for="password">패스워드</label>
<input type="password" id="password" v-model="password" class="input-text"/>
</div>
<div style="max-width: 350px; margin: 0 auto;">
<button @click="loginSubmit()" class="form-btn my-shadow">로그인</button>
</div>
</div>
</template>
<script>
import axios from 'axios'
export default {
data () {
return {
email: null,
password: null
}
},
mounted() {
},
methods: {
loginSubmit () {
const saveData = {}
saveData.email = this.email
saveData.password = this.password
axios
.post('Login API URL', saveData) // 로그인 API URL로 ID, PW를 보냄
.then((res) => {
console.log(res.data)
const token = res.data.access_token
localStorage.setItem('access_token', token) // 토큰을 저장함
const refretoken = res.data.refresh_token
localStorage.setItem('refresh_token', refretoken) // 토큰을 저장함
})
},
}
}
</script>
ID PW를 받아 axios로 서버에 로그인을 요청한다.
2. ID,PW를 판단하고 적합한 경우 토큰을 프론트로 응답
DRF로 API를 구성했다면 아래와 같은 응답이 날라온다.
(백엔드 API 구성에 대해선 다른 포스팅에서 할 예정이다)
여기서 중요한 것은 유저 정보가 같이 날라온다고 바로 쓰면 안된다는 것이다.
물론 바로 써도 큰 문제는 없지만 이후 소셜로그인을 구현했을때, 소셜로그인에서는 토큰만 날려주기 때문에 코드를 재활용 할 수 없다.
3. 토큰을 응답받으면 이 토큰으로 다시 유저 정보를 요청
<script>
import axios from 'axios'
export default {
data () {
return {
email: null,
password: null
}
},
mounted() {
},
methods: {
loginSubmit () {
const saveData = {}
saveData.email = this.email
saveData.password = this.password
axios
.post('Login API URL', saveData) // 로그인 URL로 ID, PW를 보냄
.then((res) => {
console.log(res.data)
const token = res.data.access_token
localStorage.setItem('access_token', token) // 토큰을 저장함
const refretoken = res.data.refresh_token
localStorage.setItem('refresh_token', refretoken) // 토큰을 저장함
const config = {
headers: {
Authorization: 'Bearer ' + token
}
}
axios
.get('User API URL', config) // 유저 요청
.then((response) => {
console.log(response)
} // 유저 정보를 받아옴
)
})
},
}
}
</script>User API URL로 유저 정보를 요청한다.
4. 토큰에 해당하는 유저 정보를 반환
유저의 정보가 잘 넘어온 것을 확인할 수 있다.
5. 유저 정보를 불러온 후 로그인 처리
axios.defaults.headers.common.Authorization = `Bearer ${token}`유저 정보가 잘 넘어왔으면 위의 코드처럼 axios의 defaults header값을 받아온 토큰으로 지정해줘서 모든 요청에 토큰이 담길 수 있게 한다.
이것이 서버에서 사용자가 로그인되었다고 판단하게 만드는 근거이다.
하지만 토큰만 있다고 프론트에서 로그인 되었다고 말할 수 있는가? 하면 그건 아니다
그렇다면 어떻게 로그인을 활용할 것인가에 대해서는 다음 Store 포스팅에서 작성하겠다.
