Lindungi halaman aplikasi Vue daripada akses oleh pengguna yang tidak log masuk

Question

Saya mula menggunakan supabase sebagai alternatif kepada firebase. Saya sedang melaksanakan sistem pengesahan mudah untuk aplikasi web vue saya dan saya menghadapi masalah dengan ubah hala. Saya menggunakan penyelesaian pautan ajaib untuk log masuk pengguna ke https://supabase.com/docs/guides/auth/auth-magic-link tetapi saya tidak pasti bagaimana untuk menyediakan pengalihan log masuk dengan betul pada localhost semasa pembangunan juga Bagaimana untuk menghalang pengguna yang tidak log masuk daripada melihat paparan.

Saya telah melaksanakan penghala pinia dan vue Dalam halaman utama semasa, ini ialah kod yang saya gunakan untuk membenarkan pengguna log masuk:

import { supabase } daripada '../supabase/supabase'

eksport lalai {
    nama: 'HomeView',
    data() {
        kembali {
            e-mel pengguna: null
        }
    },
    dicipta() {
        
    },
    dipasang() {
        //this.initGoogleAuth()
    },
    kaedah: {
        initMagicLinkAuth() {
            supabase.auth.signInWithOtp({
                e-mel: this.userEmail,
                pilihan: {
                    emailRedirectTo: '/about'
                }
            })
        }
    }
}

Dalam templat saya mempunyai medan input e-mel ringkas: 


    Login


Dalam penghala saya, saya mempunyai kod berikut: 
import { createRouter, createWebHistory } daripada 'vue-router'
import HomeView daripada '../views/HomeView.vue'

penghala const = createRouter({
  sejarah: createWebHistory(import.meta.env.BASE_URL),
  laluan: [
    {
      laluan: '/',
      nama: 'rumah',
      komponen:HomeView
    },
    {
      laluan: '/about',
      nama: 'tentang',
      komponen: () => import('../views/AboutView.vue')
    }
  ]
})

eksport penghala lalai

Bagaimana untuk menyediakan penghala vue dengan betul untuk menghalang pengguna yang tidak log masuk daripada menavigasi, dan bagaimana untuk menyediakan supabase dengan betul untuk pengalihan? 

Answer 1

Diambil daripada: 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