Protéger les pages de l'application Vue contre l'accès des utilisateurs non connectés

Question

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.

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 :

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é>
Dans le modèle, j'ai un simple champ de saisie d'e-mail : 


    Connexion

≪/pré>
Dans mon routeur, j'ai le code suivant : 
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é>
Comment configurer correctement vue router pour empêcher les utilisateurs non connectés de naviguer, et comment configurer correctement supabase pour la redirection ? 
            

Answer 1

Tiré de : 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