ログインしていないユーザーによるアクセスから Vue アプリケーションページを保護する-PHP中国語ネットワークQ&A

私は 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' } }) } } }

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

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

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 を正しく設定する方法は?

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