Pinia 用戶(hù)信息獲取指南

?? 在 puls-docs-store.ts 中獲取用戶(hù)信息

方法一：通過(guò) Getters 獲?。ㄍ扑]）

// 在 getters 中定義用戶(hù)信息獲取器
getters: {
  getCurrentUser: (state) => {
    const userStore = useUserStore();
    return {
      // ?? 基礎用戶(hù)信息
      userId: userStore.userDetails?.LoginUser?.Uuid || '',
      username: userStore.userDetails?.LoginUser?.Username || '',
      nickname: userStore.userDetails?.LoginUser?.Nickname || '',
      email: userStore.userDetails?.LoginUser?.Email || '',
      phoneNumber: userStore.userDetails?.LoginUser?.PhoneNumber || '',
      
      // ?? 企業(yè)信息
      companyId: userStore.userDetails?.LoginInfo?.Qyuuid || '',
      companyName: userStore.userDetails?.LoginCompanies?.[0]?.Name || '',
      
      // ?? Token 信息
      token: userStore.token,
      xiaoqiToken: userStore.xiaoqiToken,
    };
  }
}

方法二：在 Actions 中直接獲取

actions: {
  async CategoriesPageAsync(info: Record<string, unknown>) {
    // ????? 直接獲取用戶(hù) Store
    const userStore = useUserStore();
    
    // ?? 獲取用戶(hù)基本信息
    const username = userStore.userDetails?.LoginUser?.Username || '';
    const nickname = userStore.userDetails?.LoginUser?.Nickname || '';
    const userId = userStore.userDetails?.LoginUser?.Uuid || '';
    
    console.log('?? 當前操作用戶(hù):', { username, nickname, userId });
    
    // ?? 在數據中自動(dòng)添加用戶(hù)信息
    const data = {
      ...info,
      operatorId: userId,
      operatorName: username,
    };
    
    return await CategoriesPageAsync(data);
  }
}

方法三：通過(guò)組合式 API 在組件中獲取

<script setup lang="ts">
import { useUserStore, pulsDocsStore } from '@/store';

// ?? 獲取 Store 實(shí)例
const userStore = useUserStore();
const docsStore = pulsDocsStore();

// ????? 獲取當前用戶(hù)信息
const currentUser = computed(() => docsStore.getCurrentUser);

// ?? 使用用戶(hù)信息
const handleCreateCategory = async () => {
  const categoryData = {
    name: '新分類(lèi)',
    description: '分類(lèi)描述',
    create_user: currentUser.value.userId, // ?? 自動(dòng)填充創(chuàng  )建人
  };
  
  await docsStore.CreateCategoryAsync(categoryData);
};
</script>

?? 用戶(hù)信息結構說(shuō)明

基礎用戶(hù)信息

interface BasicUserInfo {
  userId: string;        // ?? 用戶(hù)唯一ID
  username: string;      // ?? 用戶(hù)名
  nickname: string;      // ??? 用戶(hù)昵稱(chēng)
  email: string;         // ?? 郵箱地址
  phoneNumber: string;   // ?? 手機號碼
}

企業(yè)信息

interface CompanyInfo {
  companyId: string;     // ?? 企業(yè)ID
  companyName: string;   // ?? 企業(yè)名稱(chēng)
}

認證信息

interface AuthInfo {
  token: string;         // ?? 主要Token
  xiaoqiToken: string;   // ?? 小七系統Token
  cacheXiaoqiToken: string; // ?? 緩存Token
}

擴展信息

interface ExtendedInfo {
  avatar: string;        // ??? 用戶(hù)頭像
  slogan: string;        // ?? 用戶(hù)標語(yǔ)
  roles: string[];       // ?? 用戶(hù)角色
}

?? 實(shí)際使用示例

1. 在創(chuàng )建操作中自動(dòng)填充用戶(hù)信息

async CreateCategoryAsync(categoryData: any) {
  // ????? 獲取當前用戶(hù)信息
  const currentUser = this.getCurrentUser;
  
  // ?? 自動(dòng)填充用戶(hù)相關(guān)字段
  const dataWithUser = {
    ...categoryData,
    create_user: currentUser.userId,
    create_user_name: currentUser.nickname,
    create_time: new Date(),
    company_id: currentUser.companyId,
  };
  
  console.log(`? 用戶(hù) ${currentUser.nickname} 創(chuàng  )建分類(lèi):`, dataWithUser.name);
  
  return await CreateCategoryAsync(dataWithUser);
}

2. 在查詢(xún)操作中記錄操作日志

async CategoriesPageAsync(info: Record<string, unknown>) {
  const currentUser = this.getCurrentUser;
  
  // ?? 記錄查詢(xún)操作
  console.log(`?? 用戶(hù) ${currentUser.nickname}(${currentUser.username}) 查詢(xún)分類(lèi)列表`, {
    searchKey: info.searchKey,
    pageIndex: info.pageIndex,
    timestamp: new Date().toISOString(),
  });
  
  const res = await CategoriesPageAsync(data);
  
  // ?? 記錄查詢(xún)結果
  console.log(`?? 查詢(xún)完成，共 ${res.DataValue?.TotalItems || 0} 條記錄`);
  
  return res;
}

3. 權限驗證

async DeleteCategoryAsync(uuids: string) {
  const currentUser = this.getCurrentUser;
  const permissions = this.getUserPermissions();
  
  // ?? 權限驗證
  if (!permissions.hasPermission('DELETE_CATEGORY')) {
    throw new Error(`用戶(hù) ${currentUser.nickname} 沒(méi)有刪除分類(lèi)的權限`);
  }
  
  // ?? 記錄刪除操作
  console.log(`??? 用戶(hù) ${currentUser.nickname} 刪除分類(lèi):`, uuids);
  
  return await DeleteCategoryAsync(uuids);
}

?? 高級用法

1. 響應式用戶(hù)信息監聽(tīng)

// 在組件中監聽(tīng)用戶(hù)信息變化
watch(
  () => userStore.userDetails,
  (newUserDetails) => {
    if (newUserDetails) {
      console.log('?? 用戶(hù)信息已更新:', newUserDetails.LoginUser?.Nickname);
      // ?? 執行相關(guān)業(yè)務(wù)邏輯
    }
  },
  { deep: true, immediate: true }
);

2. 用戶(hù)信息緩存

// 在 Store 中緩存用戶(hù)信息
state: () => ({
  cachedUserInfo: null as any,
  lastUserInfoUpdate: 0,
}),

actions: {
  getCachedUserInfo() {
    const now = Date.now();
    const cacheExpire = 5 * 60 * 1000; // 5分鐘緩存
    
    if (this.cachedUserInfo && (now - this.lastUserInfoUpdate) < cacheExpire) {
      return this.cachedUserInfo;
    }
    
    // ?? 重新獲取用戶(hù)信息
    const userStore = useUserStore();
    this.cachedUserInfo = this.getCurrentUser;
    this.lastUserInfoUpdate = now;
    
    return this.cachedUserInfo;
  }
}

3. 用戶(hù)信息格式化工具

// 用戶(hù)信息格式化工具函數
const formatUserInfo = (userInfo: any) => ({
  displayName: userInfo.nickname || userInfo.username || '未知用戶(hù)',
  fullName: `${userInfo.nickname}(${userInfo.username})`,
  contactInfo: `${userInfo.email} | ${userInfo.phoneNumber}`,
  companyInfo: userInfo.companyName || '未知企業(yè)',
});

// 在 Store 中使用
getters: {
  formattedCurrentUser: (state) => {
    const currentUser = state.getCurrentUser;
    return formatUserInfo(currentUser);
  }
}

?? 調試技巧

1. 用戶(hù)信息調試

// 在瀏覽器控制臺查看用戶(hù)信息
console.log('?? 當前用戶(hù)完整信息:', {
  basic: this.getCurrentUser,
  raw: useUserStore().userDetails,
  auth: useUserStore().authInfo,
});

2. 用戶(hù)狀態(tài)監控

// 監控用戶(hù)登錄狀態(tài)
const isUserLoggedIn = computed(() => {
  const userStore = useUserStore();
  return !!(userStore.token && userStore.userDetails);
});

?? 注意事項

1. ?? 安全性：不要將敏感信息暴露在客戶(hù)端
2. ? 性能：合理使用緩存，避免頻繁獲取用戶(hù)信息
3. ?? 同步性：確保用戶(hù)信息變更后及時(shí)更新相關(guān)狀態(tài)
4. ??? 容錯性：處理用戶(hù)信息不存在的情況
5. ?? 日志記錄：記錄重要的用戶(hù)操作便于問(wèn)題追蹤

現在您可以在 puls-docs-store.ts 中輕松獲取和使用用戶(hù)信息了！??