保护Vue应用页面免受未登录用户的访问

Question

我开始使用supabase作为firebase的替代品。我正在为我的vue webapp实现一个简单的身份验证系统，我对重定向有疑问。 我使用了魔术链接解决方案来让用户登录https://supabase.com/docs/guides/auth/auth-magic-link，但我不确定如何在开发过程中正确设置本地主机上的登录重定向以及如何防止未登录用户查看视图。

我已经实现了pinia和vue router，在目前的主页中，这是我用来让用户登录的代码：

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

export default {
    name: 'HomeView',
    data() {
        return {
            userEmail: null
        }
    },
    created() {
        
    },
    mounted() {
        //this.initGoogleAuth()     
    },
    methods: {
        initMagicLinkAuth() {
            supabase.auth.signInWithOtp({
                email: this.userEmail,
                options: {
                    emailRedirectTo: '/about'
                }
            })
        }
    }
}

在模板中，我有一个简单的电子邮件输入字段：

<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()">Login</button>
</div>

在我的路由器中，我有以下代码：

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

const router = createRouter({
  history: createWebHistory(import.meta.env.BASE_URL),
  routes: [
    {
      path: '/',
      name: 'home',
      component: HomeView
    },
    {
      path: '/about',
      name: 'about',
      component: () => import('../views/AboutView.vue')
    }
  ]
})

export default router

如何正确设置vue router以防止未登录用户导航，并如何正确设置supabase以进行重定向？

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