1. 認證框架概述

系統(tǒng)采用 Supabase 作為認證和數(shù)據服務提供商，實現(xiàn)了完整的用戶身份驗證流程。系統(tǒng)使用基于 JWT (JSON Web Token) 的認證方式，提供了安全可靠的用戶身份管理機制。

1.1 技術棧

• 前端: Vue 3 + TypeScript
• 狀態(tài)管理: Pinia
• 認證服務: Supabase Auth
• 數(shù)據存儲: Supabase PostgreSQL

1.2 主要特性

• 郵箱密碼登錄
• 密碼重置功能
• 自動會話管理
• 角色和權限控制
• 行級安全策略 (RLS)
• 安全機制優(yōu)化（禁用會話持久化）

2. 認證服務實現(xiàn)

2.1 客戶端配置

系統(tǒng)通過 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 狀態(tài)管理

系統(tǒng)使用 Pinia 存儲 (src/stores/system/auth.ts) 管理認證狀態(tài)：

export const useAuthStore = defineStore('auth', () => {
  // 狀態(tài)
  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 登錄流程

• 用戶在 LoginView.vue 輸入郵箱和密碼
• 調用 authStore.login(credentials) 方法
• 登錄請求發(fā)送到 Supabase Auth 服務
• Supabase 驗證成功后返回會話和令牌
• 通過 onAuthStateChange 事件監(jiān)聽器自動獲取用戶詳細信息
• 用戶被重定向到首頁或之前嘗試訪問的頁面

3.2 用戶信息獲取

系統(tǒng)采用事件驅動模式獲取用戶信息，避免重復請求：

// 單一職責原則：集中到事件監(jiān)聽器
supabase.auth.onAuthStateChange(async (event, session) => {
  if (session) {
    await fetchUserProfile();
  } else {
    userProfile.value = null;
    userRoles.value = [];
  }
});

3.3 安全增強措施

最新的系統(tǒng)版本禁用了會話持久化，提高了系統(tǒng)安全性：

• 將 persistSession 設置為 false
• 用戶關閉瀏覽器后會話信息被清除
• 再次訪問系統(tǒng)時需要重新登錄
• 防止未授權用戶在合法用戶離開后訪問系統(tǒng)

4. 行級安全策略 (RLS)

4.1 RLS 機制

系統(tǒng)采用 Supabase 提供的行級安全策略來控制數(shù)據訪問權限：

-- 角色表安全策略示例
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 循環(huán)依賴問題及解決方案

系統(tǒng)在實現(xiàn)過程中遇到了 RLS 循環(huán)依賴問題：

問題描述: 部門表和用戶角色表之間的 RLS 策略形成循環(huán)引用，導致無限遞歸

解決方案:

臨時禁用關鍵表的 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 組件修改自己的密碼：

• 輸入新密碼和確認密碼
• 系統(tǒng)驗證密碼復雜度和一致性
• 調用 authStore.updatePassword(newPassword) 方法
• Supabase Auth API 更新用戶密碼
• 成功后提示用戶并可選擇登出

5.2 重置密碼功能

忘記密碼的用戶可通過 ResetPasswordView.vue 重置密碼：

• 輸入注冊郵箱
• 系統(tǒng)發(fā)送重置鏈接到用戶郵箱
• 用戶點擊鏈接后重定向到密碼重置頁面
• 輸入并確認新密碼
• 密碼重置成功后重定向到登錄頁面

6. 未來優(yōu)化方向

• 添加多因素認證 (MFA): 增強系統(tǒng)安全性
• 第三方身份提供商集成: 支持通過企業(yè) SSO 登錄
• 訪問令牌生命周期管理: 提供令牌自動過期和刷新機制
• 登錄嘗試限制: 防止暴力破解攻擊
• 登錄活動審計: 記錄用戶登錄歷史和異常行為

7. 相關文件

• 認證客戶端: src/services/supabase/client.ts
• 認證服務: src/services/supabase/auth.ts
• 狀態(tài)管理: src/stores/system/auth.ts
• 登錄界面: src/views/system/LoginView.vue
• 修改密碼: src/views/system/ChangePassword.vue
• 重置密碼: src/views/system/ResetPasswordView.vue
• 數(shù)據庫遷移: supabase/migrations/20250403093948_create_user_management_system.sql

文檔概述了系統(tǒng)的認證機制實現(xiàn)，包括技術架構、核心功能和關鍵優(yōu)化。通過 Supabase 認證服務和精心設計的前端架構，系統(tǒng)實現(xiàn)了安全、可靠的用戶身份驗證，同時通過行級安全策略確保數(shù)據訪問安全。

到此這篇關于基于vue3與supabase系統(tǒng)認證機制詳解的文章就介紹到這了,更多相關vue supabase認證機制內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！

最新評論