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