vue.js

关注公众号 jb51net

关闭
首页 > 网络编程 > JavaScript > javascript类库 > vue.js > vue supabase认证机制

基于vue3与supabase系统认证机制详解

作者：z日火

这篇文章主要介绍了基于vue3与supabase系统认证机制,,系统使用基于 JWT (JSON Web Token) 的认证方式,提供了安全可靠的用户身份管理机制,需要的朋友可以参考下

1. 认证框架概述

系统采用 Supabase 作为认证和数据服务提供商，实现了完整的用户身份验证流程。系统使用基于 JWT (JSON Web Token) 的认证方式，提供了安全可靠的用户身份管理机制。

1.1 技术栈

1.2 主要特性

2. 认证服务实现

2.1 客户端配置

系统通过 src/services/supabase/client.ts 配置 Supabase 客户端，关键配置如下：

export const supabase = createClient<Database>(supabaseUrl, supabaseAnonKey, {
  auth: {
    autoRefreshToken: true,
    persistSession: false, // 设置为false，关闭会话持久化，用户关闭页面后需要重新登录
    detectSessionInUrl: true
  }
});

2.2 认证服务接口

src/services/supabase/auth.ts 封装了认证相关的服务接口：

// 用户登录
export const signIn = async (credentials: LoginCredentials) => {...};
// 用户注册
export const signUp = async (data: RegisterData) => {...};
// 用户登出
export const signOut = async () => {...};
// 获取当前用户
export const getCurrentUser = async () => {...};
// 获取当前会话
export const getSession = async () => {...};
// 重置密码
export const resetPassword = async (email: string) => {...};
// 修改密码
export const updatePassword = async (newPassword: string) => {...};

2.3 状态管理

系统使用 Pinia 存储 (src/stores/system/auth.ts) 管理认证状态：

export const useAuthStore = defineStore('auth', () => {
  // 状态
  const loading = ref(false);
  const error = ref<string | null>(null);
  const userProfile = ref<UserProfile | null>(null);
  const userRoles = ref<string[]>([]);
  // 计算属性
  const isLoggedIn = computed(() => !!userProfile.value);
  const isAdmin = computed(() => hasRole('admin'));
  // 方法
  const initialize = async () => {...};
  const login = async (credentials: LoginCredentials) => {...};
  const register = async (data: RegisterData) => {...};
  const logout = async () => {...};
  const fetchUserProfile = async () => {...};
  const hasRole = (role: string) => {...};
  return { ... };
});

3. 认证流程

3.1 登录流程

3.2 用户信息获取

系统采用事件驱动模式获取用户信息，避免重复请求：

// 单一职责原则：集中到事件监听器
supabase.auth.onAuthStateChange(async (event, session) => {
  if (session) {
    await fetchUserProfile();
  } else {
    userProfile.value = null;
    userRoles.value = [];
  }
});

3.3 安全增强措施

最新的系统版本禁用了会话持久化，提高了系统安全性：

4. 行级安全策略 (RLS)

4.1 RLS 机制

系统采用 Supabase 提供的行级安全策略来控制数据访问权限：

-- 角色表安全策略示例
ALTER TABLE public.roles ENABLE ROW LEVEL SECURITY;
CREATE POLICY "Authenticated users can view roles"
  ON public.roles
  FOR SELECT
  TO authenticated
  USING (status = 1);

4.2 RLS 循环依赖问题及解决方案

系统在实现过程中遇到了 RLS 循环依赖问题：

问题描述: 部门表和用户角色表之间的 RLS 策略形成循环引用，导致无限递归

解决方案:

临时禁用关键表的 RLS：

ALTER TABLE public.departments DISABLE ROW LEVEL SECURITY;
ALTER TABLE public.user_roles DISABLE ROW LEVEL SECURITY;

使用 SECURITY DEFINER 模式绕过 RLS 检查：

CREATE OR REPLACE FUNCTION public.get_current_user_info()
RETURNS TABLE(...)
LANGUAGE sql
SECURITY DEFINER
AS $function$
  ...
$function$;

5. 密码管理

5.1 修改密码功能

用户可以通过 ChangePassword.vue 组件修改自己的密码：

5.2 重置密码功能

忘记密码的用户可通过 ResetPasswordView.vue 重置密码：

6. 未来优化方向

7. 相关文件

文档概述了系统的认证机制实现，包括技术架构、核心功能和关键优化。通过 Supabase 认证服务和精心设计的前端架构，系统实现了安全、可靠的用户身份验证，同时通过行级安全策略确保数据访问安全。

到此这篇关于基于vue3与supabase系统认证机制详解的文章就介绍到这了,更多相关vue supabase认证机制内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:
阅读全文