선생님 카카오 로그인 api질문있습니다.

[정중식]

회원가입은따로 없고 카카오톡 로그인 기능만 구현하려고하는데요.
카톡 로그인 api가면, 카톡 이메일연동하기는 권한이없다고 안된다고합니다..!
지금은 카톡만 로그인하지만 혹시나 나중에 회원가입,로그인 확장성과 파이어베이스는 이메일로 회원가입을할 수 있으니,
무조건 카톡이메일이 필요한데 말이죵..
이럴땐 어떻게하는게좋을까요?

아니면 카카오톡 유저와 기존 로컬유저를 기억시키면될것같기는한데..

로컬스토리지가 가장 베스트인가요?

[codingapple]

카톡 로그인유저 이메일이 필요하면 
카톡 개발자센터같은데서 로그인시 이메일 가져오도록 하는거 어딘가에 있을걸요

[정중식]

선생님 제 코드좀 봐주세요!!!!!!!!!! 올바른방향의 코드인가요?

리액트 게시판에 안어울리고, vue로 구현했는데요! (선생님 vue강의 들었었음)

일단 백엔드는 파이어베이스로 구현했습니다.

VUEX 코드로 전역적으로 이렇게 user를 가져와주고있습니다.

import { app } from '@/firebaseApp';
import { getAuth, onAuthStateChanged } from 'firebase/auth';

const auth = getAuth(app);

const userStore = {
  namespaced: true,
  state: {
    user: '',
  },
  mutations: {
    setUser(state: any, user: any) {
      state.user = user;
    },
  },
  actions: {
    initAuth({ commit }: any) {
      onAuthStateChanged(auth, (user) => {
        commit('setUser', user);
      });
    },
  },
  getters: {
    getUser: (state: any) => state.user,
  },
};

export default userStore;

그리고 사용은 이런식으로..!

App.vue에 전역적으로

onMounted(() => {
  const store = useStore();
  store.dispatch('userStore/initAuth');
});

사용했습니다.

그리고, 로그인해야지 접근가능한 페이지에는 아래와 같이 적어주었습니다.

const store = useStore();

const user = ref(store.getters['userStore/getUser']);

<템플릿>

 <InfoModal
    :title="`로그인이 필요해요.`"
    :content="`로그인 후 기능을 사용할 수 있어요`"
    :butName="`로그인`"
    :onClick="onLoginLinkClick"
    :onCloseModal="onCloseModal"
    v-if="!user"
  ></InfoModal>

</템플릿>


근데 여기서 궁금한것은 ref는 실시간으로 데이터를 랜더링시켜줄수있는거라고 배웠는데,지금 ref를감싸고있는게 getUser함수인데,

getters: {
    getUser: (state: any) => state.user,
  },

이거는 지금 현재의 state.user를 리턴해주고있는건데..

로그아웃을해도, 잘 작동을할까요??

App.vue의 마운티드 코드를 적고, 추가로 업데이티드 함수에다가도 똑같이 해줘야하는게 맞을가요? 이런식으로요..

onMounted(() => {
  const store = useStore();
  store.dispatch('userStore/initAuth');
});
onUpdated(() => {
  const store = useStore();
  store.dispatch('userStore/initAuth');
})

그러면 로그인하면 마운티드됬을때 user정보를 가져오고, 로그아웃하면 업데이티드가되서 뭐 쏼라쏼라 이렇게되는걸가요?

[codingapple]

state.user 변하면 getUser로 출력해도 잘 변해있을걸요 
근데 onAuthStateChanged는 유저가 로그인 로그아웃할때마다 매번 실행되는거라 onMounted같은거 안에 적어두는게 나을듯요

[정중식]

감사합니다.선생님 한가지만 더 여쭙고싶습니다.

경로에따라서 하단 footer css가 달라지는걸 구현했는데요,

처음엔 로컬스토리지에 현재 footer의 datasetid를 가져와서 저장시킨다음에 그거를 :style active== 어쩌구 이런식으로 구현했는데,

아무래도 로그아웃하고 하면 '/'이나 뭐 암튼 페이지경로들때문에 로컬스토리지로하는거는 조금 비효율적인거같아서

router로 하려고했는데요.

<script setup>

</script>

이 환경에서 지금 현재 경로를 어떻게 가져올까요?

1.

const route = useRoute();
const currentPath = ref(route.fullPath);

const onCurrentPage = (e: any) => {
  currentPath.value = route.fullPath;
  console.log(currentPath.value);
};
console.log(currentPath.value);

대강 이런식으로 테스트해봤는데, 경로 바뀔때마다 path값을 잘 가져오긴하는데.. 문제는 새로고침했을때 계속 '/' 이걸가져옵니다.

이거 어떻게하면좋을까요?ㅠㅠㅠ

[codingapple]

onMounted같은거 안에 넣어봅시다

[정중식]

선생님 제가 답을찾았습니다.

혹시나 다른 코린이들이 vue에서 새로고침해도 현재 라우터경로가 안뜨고, '/'만 떠요!! 이런 질문이 올라온다면 이렇게 알려주십사 하고

공유합니닷

공유

어차피 안보실거같긴한데. . 그래서 요약하자면

페이지를 탐색할 때 라우터가 초기 탐색 route기본값( )을 참조한다고합니다. '/'

그래서 센세말대로 마운티드에       await router.isReady() 를 사용해야한다고하네요 감사합니다 떙큐베리망치 

[글쓴이]

글