도움 !! 도움!! 로그인 유지 관련기능 도우움!!!!!!

[정중식]

선생님 vue + 파베로 로그인구현회원가입구현은했는데요!

마이페이지나 팔로잉 페이지는 로그인한 유저만 접근가능하게 코드를짜줬습니다.

근데 새로고침하면 로그인이 필요한기능입니다 모달창이뜨면서 '/' 경로로 튕겨버리는데요

콘솔로그치면, 처음접속할떄는 유저정보 잘 뜨지만 새로고침하면 값을 찾지못하네요??..

선생님의 가르침중에 로컬스토리지에 저장이라는게 떠올랐는데

로컬스토리지에 저장해주는게 올바른 방법인가요?

여기에 근데 어떤 어떤 정보를 넣어줘야하나요?

근데 이러면 보안측면에서 괜찮나요?

[정중식]

선생님 안녕하세요

두시간 검색하고 헤매다가 방법을 찾았습니다.

먼저, 새로고침시 vuex의 user State가 초기화되는거는 정상적입니다.

접근 과정을 적어가자면,

1. 파이어베이스의 onAuthStateChanged은 비동기적 코드이기때문에, auth가 변경될 때 user가 먼저 초기화되서 null로 찍혀서

콘솔창에 user=''로 찍혔을수도있지만,

2. 저같은경우 문제의 키워드는 '새로고침'이였습니다.

새로고침을하면 user 정보가 사라지는건데, 이거는 1번과 똑같기도합니다.

이래나 저래나 1번과 2번의 문제이긴하네요,

그래서 저는 이렇게했습니다.

vuex 코드의 일부입니다.
actions: {
    initAuth({ commit }: any) {
      return new Promise<void>((resolve) => {
        onAuthStateChanged(auth, (user) => {
          commit('setUser', user);
          resolve();
        });
      });
    },
  },

이렇게하고 라우트가드를 도입했습니다.

   beforeEnter: async (to, from, next) => {
        const store = useStore();
        await store.dispatch('userStore/initAuth');

        // store.commit('userStore/setUserLoading');

        next();
      },

이제부터는 제가 고민했던것입니다.

vuex-persistedstate를 도입해서 store의 state가 일부 초기화되는것을 막고 로컬스토리지에 저장할까?

아니면 그냥 로그인할때 로컬스토리지에 저장해서 유저를 체크할까?

를 생각해봤는데 둘다 로컬스토리지에 넣는게 과연 올바른방법일까? 고민이들어서 일단 라이프가드로 선택해줬는데요 선생님

로컬스토리지가 정말 보안적으로 괜찮은가요?

선생님의 답변을 듣고 코드를 바꿀수도있을거같은데..

로컬스토리지에 어떤 정보를 넣고 유저체크를 해줘야하는건가요?

uId랑, 유저의 이메일, 닉네임정도넣고 유저 권한체크할 때 예를들면

const user = 로컬스토리지.getItem('유저') 이런식으로 불러와서  있으면 페이지 진입 ㅇㅋ해주는식으로 만 생각했는데,

 근데 마이페이지같은경우는 악성사용자가 f12눌러서 로컬스토리지 정보를 변경해버리면 어떻게해야하나요?

제 머리로 생각해보면 마이페이지는
1. 로컬스토리지 유저정보확인 후 ㅇㅋ 들여보냄
2. 로딩-> 마이페이지 로컬스토리지에 저장된 uid로 ajax요청 -> 로딩끝 -> ajax데이터 뿌리기

이정도인데 악성사용자가 로컬스토리지 uid에 저장되는 넘버코드 형식을 유추해서 막 계속 막 바꿔서 될때까지 노가다해서 뚫어버린다던가..
하는경우가 있지않을까해서 좀 보안적으로 안좋지않나 싶은데 ..

전체적으로 선생님의 생각이 궁금합니다.
제가 구현한부분부터, 로컬스토리지까지 답변 부탁드립니다 선생님 제발요 ㅠㅠ

[codingapple]

새로고침해도 유지시키려면 로컬스토리지에 로그인여부 저장해두고 쓰는 방법밖에 없습니다
진짜 로그인여부는 서버에서 데이터 입출력할 때 검사하면 되는거라 위조해도 상관없습니다 

[정중식]

감사합니다!

[정중식]

선생님 혹시 img를createObjectURL를이용해서 blob객체로만들고 vuex에 저장했는데요,

이거 다시 불러와도 사용을못하나요??

img src태그에 넣었는데 엑박이뜹니다요..

[codingapple]

저장하거나 넣는 문법이 뭔가 이상한게 아닐까요

[정중식]

그렇더라구여.. 아머리야..

[정중식]

선생님 파이어베이스에서는 총 post length 받아오는 방법이없나요?

그래서 지금 post작성할때마다 postLength라는 컬렉션에서 count를 ++시켜주는식으로 개발해서,

페이지네이션 ( 더보기버튼 ) 을 구현하려고하는데 이렇게 개발하는게 일반적인가요?

[codingapple]

aggregation 기능 찾아보면 되는데 
근데 사이즈 커지면 그냥 ++ 시키는게 저렴할 수도 있습니다

[정중식]

선생님 안녕하세요 또 저입니다.

또 여쭤볼게있어요

<script lang="ts" setup>
import { onMounted, ref } from 'vue';
import { useRoute } from 'vue-router';
import { fetchDetailPost } from '../../api/post';

import Post from './Post.vue';
import Comment from './Comment.vue';
import Loading from '../Loading.vue';

const post = ref(null);
const loading = ref(true);

onMounted(async () => {
  const paramsId = useRoute().params.id;
  post.value = await fetchDetailPost(paramsId as string);

  loading.value = false;
  // 제대로 출력됨
  console.log(post.value);
});
// null 이나옴
console.log(post.value);
</script>

<template>
  <Loading v-if="loading" />

  <Post v-if="!loading" :post="post" />

  <Comment v-if="!loading" />
</template>

<style scoped lang="scss"></style>

이렇게 온마운티드에서 콘솔찍었을때랑, 밖에서 찍었을때가 다른데..
어쩜좋을까요?
온마운티드를 사용하지말고 다른걸 사용해야할까요? 어떤게 적절한지를모르겠습니다..

[글쓴이]

글