<p>J'ai commencé à utiliser supabase comme alternative à Firebase. J'implémente un système d'authentification simple pour ma webapp vue et j'ai un problème avec les redirections. J'ai utilisé la solution Magic Link pour connecter les utilisateurs à https://supabase.com/docs/guides/auth/auth-magic-link mais je ne sais pas non plus comment configurer correctement la redirection de connexion sur localhost pendant le développement. Comment empêcher les utilisateurs non connectés d'afficher une vue. </p> <p>J'ai implémenté pinia et vue router. Dans la page d'accueil actuelle, voici le code que j'utilise pour permettre aux utilisateurs de se connecter : </p> <pre class="brush:js;toolbar:false;">importer { supabase } depuis '../supabase/supabase' exporter par défaut { nom : 'HomeView', données() { retour { utilisateurEmail : nul } }, créé() { }, monté() { //this.initGoogleAuth() }, méthodes : { initMagicLinkAuth() { supabase.auth.signInWithOtp({ email : this.userEmail, options : { emailRedirectTo : '/à propos' } }) } } } ≪/pré> <p>Dans le modèle, j'ai un simple champ de saisie d'e-mail : </p> <pre class="brush:html;toolbar:false;"><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()">Connexion</button> </div> ≪/pré> <p>Dans mon routeur, j'ai le code suivant : </p> <pre class="brush:js;toolbar:false;">import { createRouter, createWebHistory } depuis 'vue-router' importer HomeView depuis '../views/HomeView.vue' const routeur = créerRouter({ historique : createWebHistory(import.meta.env.BASE_URL), itinéraires : [ { chemin: '/', nom : 'maison', composant:HomeView }, { chemin : '/à propos de', nom : 'à propos', composant : () => import('../views/AboutView.vue') } ] }) exporter le routeur par défaut ≪/pré> <p>Comment configurer correctement vue router pour empêcher les utilisateurs non connectés de naviguer, et comment configurer correctement supabase pour la redirection ? </p>

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