인프런 커뮤니티 질문&답변

넵 답변 감사합니다. .😍😍😍😍

처음 화면에서 http://127.0.0.1:3012 을 호출하면 http://127.0.0.1:3012/articles/all 주소로 이동하죠. 그 다음 로그인을 하고 작성하다가, 로그아웃을 했습니다.

로그아웃한 상태에서 다시, http://127.0.0.1:3012 로 접속하면 http://127.0.0.1:3012/articles/all 주소로 이동하게 되고 여기서 이상하게 로그아웃된 화면인데도 입력칸이 상단에 보입니다. 그 상태에서 작성하게 되면 인증정보가 없어서 그런지 오류 발생합니다. 입력칸을 보이고 감추는 것은 $isLogin 으로 체크하는 부분을 살펴 봤습니다.

여기서 github 소스에서는 인증쿠기가 담겨져 있는 auth.Authorization 으로 체크한 부분이 있습니다. 이 부분은 로그아웃 해도 계속 남는 현상이 발생해서 id 값으로 교체해 봤습니다.

function setIsLogin() {
	const checkLogin = derived(auth, $auth => $auth.Authorization ? true : false)
  return checkLogin
}

아래와 같이 사용하면 id 값이 undefind 나와서 false 로 표기되어 전체적으로 비인증여부를 체크해주어서 잘된거 같습니다.

function setIsLogin() {
	const checkLogin = derived(auth, $auth => $auth.id ? true : false)
  return checkLogin
}

로그아웃 로직에는 문제 없어 보이는데요. 왜 authorize 에는 값이 계속 남겨지는지는 미스터리인 사항이네요. 나중에 더 공부해서 찾아보겠습니다.

  const logout = async () => {
		try {
      const options = {
        path: '/auth/logout',
      }

      await delApi(options)
      set({...initValues})
      isRefresh.set(false)
      // router.goto('/')
      articlesMode.changeMode(ALL)
    }
    catch(error) {
      alert('오류가 발생했습니다. 다시시도해 주세요')
    }
	}

일단 위의 문제가 정확히 재현 되지는 않았습니다.

비슷문제가 발생할 수 있는 부분을 조금 확인해 보니 도메인 관련 문제가 아닐가 생각됩니다

백엔드 서버에서 main.js와 services/authService.js에서

다음과 같이 쿠키 생성에서의 domain설정 부분을 127.0.0.1 로 설정하고

fastify.register(fasstifyCookie, {  
  // domain:'http://localhost/',
  domain:'http://127.0.0.1/',
  secret: "my-secret", // for cookies signature
  hook: 'onRequest', // set to false to disable cookie autoparsing or set autoparsing on any of the following hooks: 'onRequest', 'preParsing', 'preHandler', 'preValidation'. default: 'onRequest'
  parseOptions: {}  // options for parsing cookies  
})

  rep.setCookie('refresh_token', refreshToken, {
    // domain: 'localhost',
    sameSite:'none',
    secure: true,
    httpOnly: true,
    path: '/',
    expires: new Date(Date.now() + 1000 * 60 * 60 * 24 * 7),
  })  

그리고 프런트엔드에서도 service/api.js에서도 127.0.01:포트로 해주셔야 합니다.

const send = async ({method='', path='', data={}, access_token=''} = {}) => {
  const commonUrl = 'http://127.0.0.1:3000'
  // const commonUrl = 'http://localhost:3000'
  // const commonUrl = 'http://localhost:3012'
  // const commonUrl = 'http://localhost:8089'
  const url = commonUrl + path

현재 서버 버전에서는 localhost가 아닌 127.0.0.1 로 접속하면 도메인 문제로 인해 쿠키가 생성되지 않을 수 있는 것 같습니다.

이부분 시도해 보시고 그래도 문제가 있다면 아래 이메일로 코드를 압축해서 보내주시면 따로 확인해 보겠습니다.

freeseamew@gmail.com