로그인하지 않은 사용자가 Vue 애플리케이션 페이지에 액세스하지 못하도록 보호

Question

저는 Firebase의 대안으로 Supabase를 사용하기 시작했습니다. 내 vue webapp에 대한 간단한 인증 시스템을 구현 중인데 리디렉션에 문제가 있습니다. 매직 링크 솔루션을 사용하여 사용자를 https://supabase.com/docs/guides/auth/auth-magic-link에 로그인했지만 개발 중에 localhost에서 로그인 리디렉션을 올바르게 설정하는 방법을 잘 모르겠습니다. 로그인하지 않은 사용자가 보기를 보는 것을 방지하는 방법.

현재 홈페이지에서는 pinia와 vue router를 구현했으며 사용자가 로그인할 수 있도록 하는 코드는 다음과 같습니다.

'../supabase/supabase'에서 { supabase } 가져오기

기본값 내보내기 {
    이름: '홈뷰',
    데이터() {
        반품 {
            사용자 이메일: null
        }
    },
    만들어진() {
        
    },
    탑재() {
        //this.initGoogleAuth()
    },
    방법: {
        initMagicLinkAuth() {
            supabase.auth.signInWithOtp({
                이메일: this.userEmail,
                옵션: {
                    emailRedirectTo: '/정보'
                }
            })
        }
    }
}

템플릿에는 간단한 이메일 입력 필드가 있습니다.

<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>

내 라우터에는 다음 코드가 있습니다:

'vue-router'에서 { createRouter, createWebHistory } 가져오기
'../views/HomeView.vue'에서 HomeView 가져오기

const 라우터 = createRouter({
  기록: createWebHistory(import.meta.env.BASE_URL),
  경로: [
    {
      길: '/',
      이름: '집',
      구성 요소:HomeView
    },
    {
      경로: '/about',
      이름: '정보',
      구성요소: () => import('../views/AboutView.vue')
    }
  ]
})

기본 라우터 내보내기

로그인하지 않은 사용자가 탐색하는 것을 방지하기 위해 vue 라우터를 올바르게 설정하는 방법과 리디렉션을 위해 supabase를 올바르게 설정하는 방법은 무엇입니까?

Answer 1

출처: https://blog.logrocket.com/ultimate-guide-authentication-vue-js-supabase/

으아악