Vue + Springboot
SpringBoot+Vue.js - 로그인
BSYeop
2022. 2. 24. 13:49
Jwt token을 이용한 로그인 구현
userStore.js
import router from '@/router'
const userStore = {
state: {
email: '',
nickname: '',
token: '',
isLogin: false
},
mutations: {
login: function (state, payload) {
state.email = payload.email
state.nickname = payload.nickname
state.token = payload.token
state.isLogin = true
},
loginCheck: function (state, payload) {
console.log("payload =" + payload)
if(payload === 401){
state.token = null;
}
if (!state.token) {
alert("로그인 후 사용할 수 있습니다.");
router.push({
name: 'Login'
}).catch(error => { console.log(error)
})
}
},
logout: function (state) {
state.email = ''
state.nickname = ''
state.token = ''
state.isLogin = false
console.log(state)
},
}
}
export default userStorelogin
- 로그인시 토큰을 발급받아 state에 토큰,닉네임,이메일,로그인유무 값을 저장한다
loginCheck
- 토큰이 없을 경우(만료된 경우) HTTP status code 401을 응답받아 토큰을 초기화해주고 "로그인 후 사용할 수 있습니다" 알림창 출력, Login 페이지로 이동한다
Login.vue (Template)
<template>
<v-app id="inspire">
<v-main class="blue-grey lighten-4">
<!-- Login Component -->
<v-container
style="max-width: 450px"
fill-height
>
<v-row align="center">
<v-col cols="12">
<v-card>
<div class="pa-10">
<h1
style="text-align: center"
class="mb-10"
>
Login
</h1>
<v-form>
<v-text-field
v-model="email"
required
label="Email"
prepend-inner-icon="mdi-account"
/>
<v-text-field
v-model="password"
required
prepend-inner-icon="mdi-lock"
type="password"
label="Password"
/>
<v-card-actions>
<v-btn
color="blue lighten-1 text-capitalize"
depressed
large
block
dark
class="mb-3"
@click="loginSubmit()"
>
Login
</v-btn>
</v-card-actions>
<v-card-actions>
<v-btn
color="blue lighten-1 text-capitalize"
depressed
large
block
dark
class="mb-3"
@click="signUp()"
>
signUp
</v-btn>
</v-card-actions>
</v-form>
</div>
</v-card>
</v-col>
</v-row>
</v-container>
</v-main>
</v-app>
</template>Login.vue (Script)
<script>
export default {
data () {
return {
email: '',
password: '',
}
},
methods: {
loginSubmit() {
// email,password 입력 확인
if(this.email&&this.password){
let saveData = {};
saveData.email = this.email;
saveData.password = this.password;
try {
this.$axios.post("/authenticate", JSON.stringify(saveData), {
headers: {
"Content-Type": `application/json`,
},
})
.then((response) => {
if (response.status === 200) {
alert("로그인 성공")
this.$store.commit('login', response.data)
this.$router.push({path: './qna'});
}
})
// email,password 입력 오류
.catch(error =>{
console.log(error.response);
if(error.response.status===401){
alert("인증오류. 아이디와 비밀번호를 확인해주세요");
this.password = null; this.email = null;
}
});
} catch (error) {
console.error(error);
}
}else{
alert("아이디 혹은 비밀번호가 입력되지 않았습니다")
}
},
signUp(){
this.$router.push({path:"./signup"});
}
},
}
</script>loginSubmit()
- 입력받은 email, password 데이터를 /authenticate로 넘겨준다.
- 로그인 성공시 HTTP status code 200을 응답받아 "로그인 성공!" 알림창을 띄워주고 store에 login() 메소드를 실행한 후 QnA 페이지로 이동한다.
- 로그인 실패시 HTTP status code 401 응답받아 email,password의 오류를 알리는 알림창을 띄워주고 입력한 email과 password를 초기화한다.
- "그외에는 아이디와 비밀번호가 입력되지 않았습니다"라는 알림창을 띄워준다.
signUp()
- 회원가입 페이지로 이동한다.
참고
https://heewon26.tistory.com/152