亚洲see少妇裸体pics,欧美日产欧美日产免费一区,亚洲综合av一区二区三区不卡,一区二区中文字幕无码成人片,一区二区三区四区高清无码

Pinia用戶(hù)狀態(tài)管理使用指南

Pinia 用戶(hù)狀態(tài)管理使用指南

概述

本指南介紹如何使用更新后的 Pinia 用戶(hù)狀態(tài)管理模塊，該模塊已集成了用戶(hù)身份管理接口，支持完整的用戶(hù)認證、信息獲取和數據持久化功能。

功能特性

  • ? 用戶(hù)登錄認證和Token管理
  • ? 多種Token支持（主Token、小七Token、緩存Token）
  • ? 用戶(hù)詳細信息管理
  • ? 企業(yè)信息和擴展信息支持
  • ? Token過(guò)期檢測和刷新
  • ? 數據持久化存儲
  • ? 類(lèi)型安全的狀態(tài)管理

狀態(tài)結構

核心狀態(tài)

interface UserState {
  token: string;                          // 主要登錄憑證
  userInfo: UserInfo;                     // 基本用戶(hù)信息
  authInfo: UserAuthInfo | null;          // 認證信息
  userDetails: UserDetailInfo | null;     // 用戶(hù)詳細信息
  xiaoqiToken: string;                    // 小七系統Token
  cacheXiaoqiToken: string;               // 緩存小七Token
}

類(lèi)型定義

// 用戶(hù)認證信息
interface UserAuthInfo {
  token: string;
  xiaoqi_token: string;
  cachexiaoqi_token: string;
  email: string;
  sub: string;
  exp: string;
  xiaoqi_keyid: string;
  cachexiaoqi_keyid: string;
  xiaoqi_type: string;
  cachexiaoqi_type: string;
}

// 用戶(hù)詳細信息
interface UserDetailInfo {
  LoginUser: LoginUser;
  name: string;
  LoginType: number;
  LoginCompanies: LoginCompany[];
  LoginUserExtend: UserExtend[];
  LoginInfo: LoginInfo;
}

使用方法

1. 基本使用

import { useUserStore } from '@/store/modules/user';

const userStore = useUserStore();

2. 用戶(hù)登錄

// 用戶(hù)登錄
try {
  await userStore.login({
    account: 'your_username',
    password: 'your_password'
  });
  console.log('登錄成功');
} catch (error) {
  console.error('登錄失敗:', error);
}

3. 獲取用戶(hù)信息

// 獲取用戶(hù)認證信息
try {
  await userStore.getUserAuthInfo();
  console.log('認證信息獲取成功');
} catch (error) {
  console.error('獲取認證信息失敗:', error);
}

// 獲取用戶(hù)詳細信息
try {
  await userStore.getUserDetailInfo();
  console.log('用戶(hù)詳情獲取成功');
} catch (error) {
  console.error('獲取用戶(hù)詳情失敗:', error);
}

4. 訪(fǎng)問(wèn)計算屬性

// 獲取用戶(hù)基本信息
const nickname = userStore.nickname;      // 用戶(hù)昵稱(chēng)
const email = userStore.email;            // 用戶(hù)郵箱
const avatar = userStore.avatar;          // 用戶(hù)頭像
const slogan = userStore.slogan;          // 用戶(hù)標語(yǔ)
const phoneNumber = userStore.phoneNumber; // 手機號碼

// 獲取企業(yè)信息
const company = userStore.currentCompany; // 當前企業(yè)信息

// 檢查T(mén)oken狀態(tài)
const isExpired = userStore.isTokenExpired; // Token是否過(guò)期

5. Token管理

// 檢查T(mén)oken是否過(guò)期
if (userStore.isTokenExpired) {
  console.log('Token已過(guò)期，需要重新登錄');
  await userStore.logout();
}

// 刷新Token
const refreshSuccess = await userStore.refreshToken();
if (!refreshSuccess) {
  console.log('Token刷新失敗，請重新登錄');
}

6. 用戶(hù)登出

// 用戶(hù)登出
await userStore.logout();
console.log('用戶(hù)已登出');

在組件中使用

Vue 組合式 API

<template>
  <div class="user-info">
    <img :src="avatar" :alt="nickname" class="avatar" />
    <div class="info">
      <h3>{{ nickname }}</h3>
      <p>{{ email }}</p>
      <p>{{ slogan }}</p>
      <div v-if="currentCompany" class="company">
        <span>{{ currentCompany.Name }}</span>
      </div>
    </div>
    <button @click="handleLogout">登出</button>
  </div>
</template>

<script setup lang="ts">
import { computed } from 'vue';
import { useUserStore } from '@/store/modules/user';
import { useRouter } from 'vue-router';

const userStore = useUserStore();
const router = useRouter();

// 響應式數據
const nickname = computed(() => userStore.nickname);
const email = computed(() => userStore.email);
const avatar = computed(() => userStore.avatar);
const slogan = computed(() => userStore.slogan);
const currentCompany = computed(() => userStore.currentCompany);

// 登出處理
const handleLogout = async () => {
  try {
    await userStore.logout();
    router.push('/login');
  } catch (error) {
    console.error('登出失敗:', error);
  }
};
</script>

選項式 API

<script>
import { useUserStore } from '@/store/modules/user';

export default {
  setup() {
    const userStore = useUserStore();
    return { userStore };
  },
  computed: {
    userInfo() {
      return {
        nickname: this.userStore.nickname,
        email: this.userStore.email,
        avatar: this.userStore.avatar,
        company: this.userStore.currentCompany?.Name || ''
      };
    }
  },
  methods: {
    async logout() {
      await this.userStore.logout();
      this.$router.push('/login');
    }
  }
};
</script>

路由守衛集成

// router/index.ts
import { useUserStore } from '@/store/modules/user';

router.beforeEach(async (to, from, next) => {
  const userStore = useUserStore();
  
  // 檢查是否需要登錄
  if (to.meta.requiresAuth) {
    if (!userStore.token) {
      next('/login');
      return;
    }
    
    // 檢查T(mén)oken是否過(guò)期
    if (userStore.isTokenExpired) {
      const refreshSuccess = await userStore.refreshToken();
      if (!refreshSuccess) {
        next('/login');
        return;
      }
    }
  }
  
  next();
});

數據持久化

系統自動(dòng)持久化以下?tīng)顟B(tài)：

  • ? token - 主要登錄憑證
  • ? authInfo - 認證信息
  • ? userDetails - 用戶(hù)詳細信息
  • ? xiaoqiToken - 小七系統Token
  • ? cacheXiaoqiToken - 緩存Token

數據存儲在 localStorage 中，頁(yè)面刷新后自動(dòng)恢復。

API 集成待辦

當前模塊包含了完整的類(lèi)型定義和狀態(tài)管理邏輯，但需要集成實(shí)際的API調用：

需要實(shí)現的API調用

  1. getUserAuthInfo() - 集成 api/auth/GetUserInfo
  2. getUserDetailInfo() - 集成 api/auth/ShowUserInfos
  3. refreshToken() - 實(shí)現Token刷新邏輯

示例集成代碼

// 在 actions 中替換 TODO 注釋
async getUserAuthInfo() {
  try {
    const response = await api.post('/auth/GetUserInfo');
    if (response.Result === 1) {
      this.setAuthInfo(response.DataValue);
      return response.DataValue;
    }
    throw new Error(response.Message || '獲取認證信息失敗');
  } catch (error) {
    console.error('獲取用戶(hù)認證信息失敗:', error);
    throw error;
  }
}

最佳實(shí)踐

  1. 類(lèi)型安全：始終使用 TypeScript 類(lèi)型定義
  2. 錯誤處理：妥善處理API調用錯誤
  3. Token管理：定期檢查T(mén)oken有效性
  4. 數據同步：登錄后及時(shí)獲取用戶(hù)詳細信息
  5. 安全存儲：敏感信息加密存儲
  6. 狀態(tài)更新：使用提供的方法更新?tīng)顟B(tài)，避免直接修改

故障排除

常見(jiàn)問(wèn)題

  1. Token過(guò)期：檢查 isTokenExpired 狀態(tài)，調用 refreshToken()
  2. 類(lèi)型錯誤：確保API響應數據符合定義的接口類(lèi)型
  3. 持久化失敗：檢查瀏覽器localStorage是否可用
  4. 權限問(wèn)題：確保用戶(hù)角色和權限正確設置

調試工具

// 開(kāi)發(fā)環(huán)境調試
if (process.env.NODE_ENV === 'development') {
  console.log('用戶(hù)狀態(tài):', userStore.$state);
  console.log('Token過(guò)期狀態(tài):', userStore.isTokenExpired);
  console.log('用戶(hù)詳情:', userStore.userDetails);
}

更新日志

  • 2025-10-03：
    • 集成用戶(hù)身份管理接口
    • 添加多Token支持
    • 增強數據持久化
    • 完善類(lèi)型定義
    • 添加Token過(guò)期檢測

文章目錄

    亚洲see少妇裸体pics,欧美日产欧美日产免费一区,亚洲综合av一区二区三区不卡,一区二区中文字幕无码成人片,一区二区三区四区高清无码