로그인하지 않은 사용자가 Vue 애플리케이션 페이지에 액세스하지 못하도록 보호
<p>저는 Firebase의 대안으로 Supabase를 사용하기 시작했습니다. 내 vue webapp에 대한 간단한 인증 시스템을 구현 중인데 리디렉션에 문제가 있습니다.
매직 링크 솔루션을 사용하여 사용자를 https://supabase.com/docs/guides/auth/auth-magic-link에 로그인했지만 개발 중에 localhost에서 로그인 리디렉션을 올바르게 설정하는 방법을 잘 모르겠습니다. 로그인하지 않은 사용자가 보기를 보는 것을 방지하는 방법. </p>
<p>현재 홈페이지에서는 pinia와 vue router를 구현했으며 사용자가 로그인할 수 있도록 하는 코드는 다음과 같습니다. </p>
<pre class="brush:js;toolbar:false;">'../supabase/supabase'에서 { supabase } 가져오기
기본값 내보내기 {
이름: '홈뷰',
데이터() {
반품 {
사용자 이메일: null
}
},
만들어진() {
},
탑재() {
//this.initGoogleAuth()
},
방법: {
initMagicLinkAuth() {
supabase.auth.signInWithOtp({
이메일: this.userEmail,
옵션: {
emailRedirectTo: '/정보'
}
})
}
}
}
</pre>
<p>템플릿에는 간단한 이메일 입력 필드가 있습니다. </p>
<pre class="brush:html;toolbar:false;"><input type="email" class="form-control" placeholder="Email" v-model="userEmail">
<div class="d-grid gap-2">
<button class="btn btn-primary" @click.prevent="initMagicLinkAuth()>로그인</button>
</div>
</pre>
<p>내 라우터에는 다음 코드가 있습니다: </p>
<pre class="brush:js;toolbar:false;">'vue-router'에서 { createRouter, createWebHistory } 가져오기
'../views/HomeView.vue'에서 HomeView 가져오기
const 라우터 = createRouter({
기록: createWebHistory(import.meta.env.BASE_URL),
경로: [
{
길: '/',
이름: '집',
구성 요소:HomeView
},
{
경로: '/about',
이름: '정보',
구성요소: () => import('../views/AboutView.vue')
}
]
})
기본 라우터 내보내기
</pre>
<p>로그인하지 않은 사용자가 탐색하는 것을 방지하기 위해 vue 라우터를 올바르게 설정하는 방법과 리디렉션을 위해 supabase를 올바르게 설정하는 방법은 무엇입니까? </p>
