ログインしていないユーザーによるアクセスから Vue アプリケーション ページを保護する

Question

私は firebase の代替として supabase を使い始めました。 vue Web アプリに単純な認証システムを実装していますが、リダイレクトに問題があります。 マジック リンク ソリューションを使用してユーザーを https://supabase.com/docs/guides/auth/auth-magic-link にログインさせましたが、開発中にローカルホストでログイン リダイレクトを適切に設定する方法もわかりませんログインしていないユーザーがビューを表示できないようにする方法。

pinia と vue ルーターを実装しました。現在のホームページでは、これはユーザーがログインできるようにするために使用するコードです:

import { supabase } from '../supabase/supabase'

デフォルトのエクスポート {
    名前: 'ホームビュー'、
    データ（） {
        戻る {
            userEmail: null
        }
    }、
    作成した（） {
        
    }、
    マウントされた() {
        //this.initGoogleAuth()
    }、
    メソッド: {
        initMagicLinkAuth() {
            supabase.auth.signInWithOtp({
                電子メール: this.userEmail、
                オプション: {
                    emailRedirectTo: '/about'
                }
            })
        }
    }
}

テンプレートには簡単な電子メール入力フィールドがあります:

<input type="email" class="form-control" placeholder="Email" v-model="userEmail">
<div class="d-グリッドギャップ-2">
    <button class="btn btn-primary" @click.prevent="initMagicLinkAuth()">ログイン</button>
</div>

ルーターには次のコードがあります:

import { createRouter, createWebHistory } from 'vue-router'
「../views/HomeView.vue」から HomeView をインポートします

const router = createRouter({
  履歴: createWebHistory(import.meta.env.BASE_URL),
  ルート: [
    {
      パス： '/'、
      名前: 「ホーム」、
      コンポーネント:ホームビュー
    }、
    {
      パス: '/about'、
      名前: 「約」、
      コンポーネント: () => import('../views/AboutView.vue')
    }
  】
})

デフォルトルーターをエクスポートする

ログインしていないユーザーがナビゲートできないように vue ルーターを正しく設定する方法、およびリダイレクト用に supabase を正しく設定する方法は?

Answer 1

Taken from: https://blog.logrocket.com/ultimate-guide-authentication-vue-js-supabase/

// router/index.js
import { createRouter, createWebHistory } from 'vue-router';
function loadPage(view) {
  return () =>
    import(
      /* webpackChunkName: "view-[request]" */ `@/views/${view}.vue`
    );
}
const routes = [
  {
    path: '/',
    name: 'Dashboard',
    component: loadPage("Dashboard"),
    meta: {
      requiresAuth: true,
    }
  },
  {
    path: '/sign-up',
    name: 'SignUp',
    component: loadPage("SignUp")
  },
  {
    path: '/sign-in',
    name: 'SignIn',
    component: loadPage("SignIn")
  },
]
const router = createRouter({
  history: createWebHistory(process.env.BASE_URL),
  routes
})

router.beforeEach((to, from, next) => {
  // get current user info
  const currentUser = supabase.auth.user();
  const requiresAuth = to.matched.some
  (record => record.meta.requiresAuth);

  if(requiresAuth && !currentUser) next('sign-in');
  else if(!requiresAuth && currentUser) next("/");
  else next();
})

export default router