Description
export default {
name: "SignInPage",
components: {
LoginForm,
},
data() {
return {
isLogin: false,
};
},
mounted() {
if (this.$store.state.isAuthenticated != false) {
console.log(this.$store.state)
console.log(this.$store.state.isAuthenticated)
console.log("true임 ㅋㅋ")
console.log(this.$store.state.isRealized)
this.isLogin = true;
} else {
console.log("false임 ㅋㅋ 병신")
this.isLogin = false;
}
},
methods: {
onSubmit(payload) {
if (!this.isLogin) {
const { email, password } = payload;
axios
.post("http://localhost:7777/member/sign-in", { email, password })
.then((res) => {
if (res.data) {
alert("로그인 성공!");
console.log("res.data" + res.data);
console.log("JSON.stringify(res.data) : " + JSON.stringify(res.data));
this.$store.state.isAuthenticated = true;
this.$cookies.set("user", res.data, 3600);
localStorage.setItem("userInfo", JSON.stringify(res.data));
this.isLogin = true;
this.$router.push("/");
} else {
alert("아이디 혹은 비밀번호가 존재하지 않거나 틀렸습니다.");
}
})
.catch((res) => {
alert(res.response.data.message);
});
} else {
alert("이미 로그인이 되어 있습니다! this.isLogin : " + this.isLogin);
}
},
},
};
</script>
<style scoped>
</style>
JavaScript
복사
현재 코드 진행상 sign-in 페이지에 진입하였을경우
mounted 함수가 실행되면서 store/state 폴더 경로에 isAuthenticated 값을 가져와서 현재 로그인 여부를 확인하는걸로 알고있습니다.
하지만 초반에 함수를 실행하게되면
console.log(this.$store.state.isAuthenticated) 는 undefined가 실행이 되는데
export default {
isAuthenticated: false
}
JavaScript
복사
현재 state는 이 상태에서 undefined가 되었습니다.
하지만 현재 문제는 해결되었는데 그 사이에 변동사항은
1. npm run serve 를 실행한지 1시간이 지났다.
2, frontend 저장소를 Synk Pull 을 진행하였다.
3. package.json의 변동사항이 생겨서 새로이 npm install을 진행후 npm run serve를 진행하였다.
4.
state.js에 새로운 변수들이 생성되었다.
입니다. 무엇이 문제였고 어떤것이 해결방안이었을까요
Try
Solution
Navigation 쪽에서 실제 로그인과 관련된 인증 설정을 고정시키게 됩니다.
이 부분의 연동이 제대로 진행되지 않는다면 로그인 동작이 요상하게 될 것 입니다.