Schützen Sie Vue-Anwendungsseiten vor dem Zugriff nicht angemeldeter Benutzer

Question

Ich habe angefangen, Supabase als Alternative zu Firebase zu verwenden. Ich implementieren ein einfaches Authentifizierungssystem für meine Vue-Webanwendung und habe ein Problem mit Weiterleitungen. Ich habe die Magic-Link-Lösung verwendet, um Benutzer bei https://supabase.com/docs/guides/auth/auth-magic-link anzumelden, bin mir aber nicht sicher, wie ich die Anmeldeumleitung auf localhost auch während der Entwicklung richtig einrichten soll So verhindern Sie, dass nicht angemeldete Benutzer eine Ansicht anzeigen.

Ich habe Pinia und Vue Router implementiert. Auf der aktuellen Homepage verwende ich diesen Code, um Benutzern die Anmeldung zu ermöglichen:

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

Standard exportieren {
    Name: 'HomeView',
    Daten() {
        zurückkehren {
            Benutzer-E-Mail: null
        }
    },
    erstellt() {
        
    },
    mount() {
        //this.initGoogleAuth()
    },
    Methoden: {
        initMagicLinkAuth() {
            supabase.auth.signInWithOtp({
                E-Mail: this.userEmail,
                Optionen: {
                    emailRedirectTo: '/about'
                }
            })
        }
    }
}

In der Vorlage habe ich ein einfaches E-Mail-Eingabefeld:

<input type="email" class="Email"
<div class="d-grid gap-2">
    <button class="btn btn-primary" @click.prevent="initMagicLinkAuth()">Login</button>
</div>

In meinem Router habe ich folgenden Code:

import { createRouter, createWebHistory } from 'vue-router'
HomeView aus '../views/HomeView.vue' importieren

const router = createRouter({
  Verlauf: createWebHistory(import.meta.env.BASE_URL),
  Routen: [
    {
      Weg: '/',
      Name: 'Zuhause',
      Komponente:HomeView
    },
    {
      Pfad: '/about',
      Name: 'ungefähr',
      Komponente: () => import('../views/AboutView.vue')
    }
  ]
})

Standardrouter exportieren

Wie richtet man den Vue-Router richtig ein, um nicht angemeldete Benutzer an der Navigation zu hindern, und wie richtet man Supabase richtig für die Umleitung ein?

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