如何在Vue应用中用Supabase阻止未登录用户访问并配置重定向

一、正确配置Supabase魔法链接重定向 #

1. Supabase控制台配置允许的重定向URL #

登录Supabase控制台，进入你的项目 → 认证 → URL配置 → 站点URL和重定向URL，添加本地开发的完整重定向地址，比如http://localhost:5173/about（根据你的实际开发端口调整）。

2. 修改前端魔法链接代码的重定向地址 #

你的initMagicLinkAuth方法里，emailRedirectTo需要用绝对URL，不能用相对路径：

methods: {
    initMagicLinkAuth() {
        supabase.auth.signInWithOtp({
            email: this.userEmail,
            options: {
                // 替换成你本地开发的完整地址
                emailRedirectTo: 'http://localhost:5173/about'
            }
        })
    }
}

3. 全局监听Supabase认证状态，处理回调 #

在App.vue中添加认证状态监听，确保用户点击魔法链接后，前端能正确获取用户信息并完成登录：

<script setup>
import { supabase } from './supabase/supabase'
import { useAuthStore } from './stores/auth'
import { onMounted } from 'vue'

const authStore = useAuthStore()

onMounted(() => {
    // 监听认证状态变化
    supabase.auth.onAuthStateChange((event, session) => {
        authStore.setUser(session?.user || null)
    })

    // 初始化时获取当前用户
    supabase.auth.getUser().then(({ data: { user } }) => {
        authStore.setUser(user)
    })
})
</script>

二、用Pinia+Vue Router实现路由守卫，阻止未登录用户访问指定页面 #

1. 创建Pinia的Auth Store #

在src/stores/auth.js中创建状态管理store，存储用户登录状态：

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

export const useAuthStore = defineStore('auth', {
    state: () => ({
        user: null
    }),
    actions: {
        setUser(user) {
            this.user = user
        },
        async logout() {
            await supabase.auth.signOut()
            this.user = null
        }
    },
    getters: {
        isLoggedIn: (state) => !!state.user
    }
})

2. 修改Vue Router配置，添加路由守卫 #

更新你的路由文件，标记需要授权的页面，并添加全局前置守卫：

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

const router = createRouter({
    history: createWebHistory(import.meta.env.BASE_URL),
    routes: [
        {
            path: '/',
            name: 'home',
            component: HomeView,
            meta: { requiresGuest: true } // 可选：只允许未登录用户访问
        },
        {
            path: '/about',
            name: 'about',
            component: () => import('../views/AboutView.vue'),
            meta: { requiresAuth: true } // 标记该页面需要登录才能访问
        }
    ]
})

// 全局路由守卫
router.beforeEach((to, from, next) => {
    const authStore = useAuthStore()

    // 如果页面需要登录，且用户未登录，跳转到首页
    if (to.meta.requiresAuth && !authStore.isLoggedIn) {
        next('/')
    } 
    // 如果页面只允许未登录用户访问，且用户已登录，跳转到about
    else if (to.meta.requiresGuest && authStore.isLoggedIn) {
        next('/about')
    } 
    // 其他情况正常跳转
    else {
        next()
    }
})

export default router

3. 确保Pinia已正确初始化 #

在main.js中确保Pinia已经被挂载：

import { createApp } from 'vue'
import { createPinia } from 'pinia'
import App from './App.vue'
import router from './router'

const app = createApp(App)
app.use(createPinia())
app.use(router)
app.mount('#app')

注意事项 #

• 本地开发时，确保Supabase控制台的重定向URL和代码中的emailRedirectTo完全一致，包括协议、域名、端口和路径。
• 如果使用Vite，开发端口默认是5173，若你的端口不同，记得修改对应地址。
• 生产环境部署时，要把Supabase控制台的重定向URL换成你的生产域名地址，比如https://your-domain.com/about。

内容的提问来源于stack exchange，提问作者newbiedev