-
질문 & 답변
카테고리
-
세부 분야
프론트엔드
-
해결 여부
해결됨
첫 메인 화면 $isLogin 인증 부분 궁금한점이 있습니다.
23.07.12 16:26 작성 23.07.12 16:27 수정 조회수 313
0
처음 화면에서 http://127.0.0.1:3012 을 호출하면 http://127.0.0.1:3012/articles/all 주소로 자동 이동합니다.
궁금한 점은 articles/all 화면에서 제일 상단에 인증되면 보이는 입력칸이 보입니다.
{#if $isLogin} 으로 조건이 되어도 true 인지 입력칸이 보입니다.
로그아웃 버튼을 누르면 로그인을 하지 않은 첫화면인데 작동이 되어 로그아웃으로 해제 됩니다. 이 부분이 궁금합니다.
<script>
import ArticleHeader from '../components/ArticleHeader.svelte';
import ArticleList from '../components/ArticleList.svelte'
import ArticleAddForm from '../components/ArticleAddForm.svelte'
import Comments from '../pages/Comments.svelte'
import { isLogin } from '../stores'
import { Route } from 'tinro'
</script>
<ArticleHeader />
<main class="slog-main ">
{#if $isLogin}
<ArticleAddForm />
{/if}
<ArticleList />
<Route path="/comments/:id" >
<Comments />
</Route>
</main>
function setIsLogin() {
const checkLogin = derived(auth, $auth => $auth.Authorization ? true : false)
return checkLogin
}
답변을 작성해보세요.
1
Indie Coder
지식공유자2023.07.12
인증의경우 한번로그인하면 쿠키에 인증토큰이 저장되었다가 앱을 실행시키면 해당토큰으로 로그인이 확인됩니다
이 과정은 auth스토어의 refresh 부분을 보시면됩니다
그리고 isLogin 스토어는 이 auth 스토어를 참조해서 해당스토어에 로긴정보의 유무를 반응형으로 감지합니다 그래서 로긴정보가 있으면 true 가 되어입력창등을 보여주고 로그아웃이 발생해 auth 스토어가 초기화되면 false가 되어 입력창등이 사라지게 됩니다
이부분은 svelte의 reactivity 즉 반응성으로 작동되는 부분입니다
심재운
질문자2023.07.13
넵 답변 감사합니다. .😍😍😍😍
처음 화면에서 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('오류가 발생했습니다. 다시시도해 주세요')
}
}
0
Indie Coder
지식공유자2023.07.17
일단 위의 문제가 정확히 재현 되지는 않았습니다.
비슷문제가 발생할 수 있는 부분을 조금 확인해 보니 도메인 관련 문제가 아닐가 생각됩니다
백엔드 서버에서 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
답변 2