qlfy-ecological-login 1.1.10 → 1.2.0

package/README.md

@@ -11,11 +11,11 @@
 - 🔐 **OAuth2认证** - 基于标准OAuth2协议的统一登录
 - 🚀 **Vue3支持** - 完全基于Vue3 Composition API开发
 - 📦 **TypeScript** - 完整的TypeScript类型支持
-- 🔄 **自动Token管理** - 自动处理token存储、刷新和过期
+- 🔄 **自动Token管理** - 自动处理token存储和校验
 - 👥 **权限管理** - 获取和管理用户权限信息
 - 🎯 **灵活配置** - 支持多种配置模式和自定义参数
-- 📱 **状态监听** - 实时监听登录状态变化
-- 🛡️ **安全可靠** - 内置安全机制和错误处理
+- ️ **安全可靠** - 内置安全机制和错误处理
+- 📝 **日志调试** - 支持开启日志和调试模式
 
 ## 安装
 
@@ -49,6 +49,7 @@ app.mount('#app')
       login-page-base-address="https://sdocen.weathermate.cn:15029/auth"
       login-service-base-address="http://10.76.34.53:48080"
       :use-router="router"
+      :show-log="true"
       @login-success="handleLoginSuccess"
       @login-fail="handleLoginFail"
       @logging-in="handleLoggingIn"
@@ -69,8 +70,8 @@ const clientId = 'your-client-id'
 const clientSecret = 'your-client-secret'
 
 // 事件处理
-const handleLoginSuccess = (userInfo) => {
-  console.log('登录成功:', userInfo)
+const handleLoginSuccess = (loginInfo) => {
+  console.log('登录成功:', loginInfo)
 }
 
 const handleLoginFail = (error) => {
@@ -94,149 +95,51 @@ const handleLoggingIn = (token) => {
 | `loginPageBaseAddress` | `string` | ✅ | - | 统一登录页面的基础地址 |
 | `loginServiceBaseAddress` | `string` | ✅ | - | 登录服务的基础地址 |
 | `useRouter` | `Router` | ✅ | - | Vue Router实例 |
-| `isEnabled` | `boolean` | ❌ | `true` | 是否启用组件，支持动态控制 |
 | `forceMode` | `boolean` | ❌ | `true` | 强制登录模式 |
+| `clientName` | `string` | ❌ | - | 应用名称 |
 | `token` | `string` | ❌ | - | 外部传入的token |
-| `listenToken` | `boolean` | ❌ | `false` | 是否实时监听token状态 |
+| `isEnabled` | `boolean` | ❌ | `true` | 是否启用组件，支持动态控制 |
 | `redirectPath` | `string` | ❌ | `''` | 认证成功后的重定向路径 |
-| `tokenName` | `string` | ❌ | `'access_token'` | 本地存储token的键名 |
-| `tokenValidity` | `number` | ❌ | `7200` | token有效期（秒） |
+| `tenantId` | `number \| string` | ❌ | `168` | 租户ID |
+| `showLog` | `boolean` | ❌ | `false` | 是否显示执行日志 |
+| `openDebugger` | `boolean` | ❌ | `false` | 是否开启调试模式 |
 
 ### 组件事件 (Events)
 
 | 事件名 | 参数 | 说明 |
 |--------|------|------|
-| `loginSuccess` | `(userInfo: any)` | 登录成功时触发 |
-| `loginFail` | `(error: any)` | 登录失败时触发 |
-| `loggingIn` | `(token: string)` | 正在登录时触发 |
+| `loggingIn` | `(code: String, loginInfo?: any)` | 正在登录时触发 |
+| `loginSuccess` | `(loginInfo: { [x: string]: any } \| null)` | 登录成功时触发 |
+| `loginFail` | `(failInfo: any)` | 登录失败时触发 |
+| `tokenRefresh` | `(loginInfo: { [x: string]: any } \| null)` | Token刷新时触发 |
 
 #### 事件触发机制详解
 
 **1. `loggingIn` 事件**
-- **触发时机**: 组件初始化加载
+- **触发时机**: 组件初始化加载或路由变化时检测到token
 - **触发条件**: 可从插件参数、url或缓存中获取到token
 - **参数说明**: 当前获取到的token值
-- **使用场景**: 显示登录加载状态，提示用户正在处理登录信息
-
-```javascript
-const handleLoggingIn = (token) => {
-  console.log('正在处理登录，token:', token)
-  // 显示加载动画
-  showLoading()
-}
-```
+- **使用场景**: 显示登录加载状态
 
 **2. `loginSuccess` 事件**
 - **触发时机**: 插件首次完成完整登录流程后，包括token验证和用户权限获取
 - **触发条件**: 
-  
-  - token验证通过（后端返回code为0）
+  - token验证通过
   - 用户权限信息获取成功
 - **参数说明**: 包含用户权限和配置信息的完整对象
-- **数据结构**:
-  ```typescript
-  {
-    code: number,
-    data: {
-      user: any,        // 用户基本信息
-      permissions: any, // 用户权限列表
-      roles: any,       // 用户角色信息
-      menus: any        // 菜单权限
-    }
-  }
-  ```
-- **使用场景**: 保存用户信息到全局状态，初始化应用权限，跳转到主页面
-
-```javascript
-const handleLoginSuccess = (userInfo) => {
-  // 保存用户信息到状态管理
-  store.commit('setUserInfo', userInfo.data)
-  
-  // 初始化权限
-  initPermissions(userInfo.data.permissions)
-  
-  // 跳转到主页面
-  router.push('/dashboard')
-  
-  // 隐藏加载动画
-  hideLoading()
-}
-```
+- **使用场景**: 保存用户信息到全局状态，初始化应用权限
 
 **3. `loginFail` 事件**
 - **触发时机**: 登录流程中任何步骤失败时
 - **触发条件**:
-  - 传入的token参数验证失败（后端返回非0状态码）
+  - Token验证失败
   - 用户权限获取失败
   - 网络请求异常
-  - 在非强制模式下无有效token时（强制模式下token无效跳转统一认证页面）
-  - 在非强制模式下token有效，但用户配置获取失败（强制模式下配置获取失败跳转统一认证页面）
-- **解额决参数说明**: 包含错误信息的对象
-- **错误类型**:
-  
-  ```typescript
-  {
-    msg: string,    // 错误描述信息
-    data: any,      // 详细错误数据（可能为null）
-    code?: number   // 错误代码（如果有）
-  }
-  ```
-- **使用场景**: 显示错误提示，记录错误日志，处理登录失败逻辑
-
-```javascript
-const handleLoginFail = (error) => {
-  console.error('登录失败:', error)
-  
-  // 显示错误提示
-  ElMessage.error(error.msg || '登录失败，请重试')
-  
-  // 记录错误日志
-  logError('Login failed', error)
-  
-  // 隐藏加载动画
-  hideLoading()
-  
-  // 根据错误类型处理
-  if (error.msg.includes('Token验证失败')) {
-    // 清除本地token，重新登录
-    clearLocalToken()
-  }
-}
-```
+  - 在非强制模式下无有效token时
+- **参数说明**: 包含错误信息的对象
+- **使用场景**: 显示错误提示，记录错误日志
 
-#### 事件流程图
-
-```
-页面加载/路由变化
-        ↓
-   检查登录状态
-        ↓
-  发现参数、URL或缓存中有token
-        ↓
-   触发 loggingIn 事件 ← 显示加载状态
-        ↓
-    验证token
-        ↓
-   ┌─────────────┐
-   │  验证结果   │
-   └─────────────┘
-    ↓           ↓
-  成功         失败
-    ↓           ↓
-获取用户权限   触发 loginFail 事件
-    ↓
-触发 loginSuccess 事件
-```
-
-#### 最佳实践
-
-1. **统一错误处理**: 在`loginFail`事件中统一处理各种登录错误
-2. **加载状态管理**: 配合`loggingIn`和`loginSuccess`/`loginFail`事件管理加载状态
-3. **权限初始化**: 在`loginSuccess`事件中完成权限系统的初始化
-4. **错误日志**: 记录详细的错误信息便于问题排查
-5. **用户体验**: 提供清晰的状态反馈和错误提示
-
-### 组件方法 (Methods)
+### 组件方法 (Exposed Methods)
 
 通过组件ref可以调用以下方法：
 
@@ -245,104 +148,57 @@ const handleLoginFail = (error) => {
 const loginRef = ref()
 
 // 退出登录
-loginRef.value.logout()
+await loginRef.value.logout()
 
 // 获取当前token
-const token = loginRef.value.getToken()
-
-// 获取用户权限信息
-const permissions = loginRef.value.getUserPermission()
-```
-
-## 工具函数
-
-组件还提供了一系列工具函数，可以在应用的任何地方使用：
-
-### 工具函数API表格
-
-| 函数名 | 参数 | 返回值 | 说明 |
-|--------|------|--------|------|
-| `logout` | `isGoLog?: boolean`, `success?: (res) => void`, `error?: (err) => void` | `void` | 退出登录，可选择是否跳转登录页 |
-| `getToken` | 无 | `string \| null` | 获取当前存储的访问token |
-| `getRefreshToken` | 无 | `string \| undefined` | 获取刷新token |
-| `getUserPermission` | 无 | `any` | 获取当前用户的权限信息 |
-| `goLogin` | 无 | `void` | 跳转到统一登录页面 |
-| `getLoginUrl` | `loginPageBaseAddress: string`, `clientId: string`, `clientSecret: string`, `redirectUrl?: string` | `string` | 生成登录页面URL |
-| `changePassword` | `newPassword: string`, `oldPassword: string` | `Promise<any>` | 修改用户密码 |
-
-### 详细说明
-
-#### `logout(isGoLog?, success?, error?)`
-**功能**: 退出当前登录状态
-- `isGoLog`: 是否在退出后跳转到登录页，默认为true
-- `success`: 退出成功的回调函数
-- `error`: 退出失败的回调函数
-
-#### `getToken()`
-**功能**: 获取当前用户的访问token
-- 返回存储在本地的token，如果不存在或已过期则返回null
-
-#### `getRefreshToken()`
-**功能**: 获取用于刷新访问token的刷新token
-- 返回刷新token，用于token续期
+const token = await loginRef.value.getToken()
 
-#### `getUserPermission()`
-**功能**: 获取当前用户的权限信息
-- 返回包含用户权限、角色、菜单等信息的对象
+// 获取登录信息
+const loginInfo = await loginRef.value.getLoginInfo()
 
-#### `goLogin()`
-**功能**: 跳转到统一登录页面
-- 自动构建登录URL并在当前窗口打开
+// 跳转到统一登录页面
+await loginRef.value.goLogin()
+```
 
-#### `getLoginUrl(loginPageBaseAddress, clientId, clientSecret, redirectUrl?)`
-**功能**: 生成登录页面的完整URL
-- `loginPageBaseAddress`: 登录页面的基础地址
-- `clientId`: 应用ID
-- `clientSecret`: 应用密钥
-- `redirectUrl`: 登录成功后的重定向地址，默认为当前页面
+## 全局工具函数
 
-#### `changePassword(newPassword, oldPassword)`
-**功能**: 修改用户密码
-- `newPassword`: 新密码
-- `oldPassword`: 原密码
-- 返回Promise，成功时resolve，失败时reject
+组件还提供了一系列全局工具函数，可以在应用的任何地方使用：
 
 ```javascript
 import { 
   logout, 
+  goLogin, 
   getToken, 
   getRefreshToken, 
-  getUserPermission,
-  goLogin,
-  getLoginUrl,
-  changePassword
+  getUserPermission 
 } from 'qlfy-ecological-login'
 
 // 退出登录
+// isGoLog: 是否跳转到登录页，默认为true
+// success: 成功回调
+// error: 失败回调
 logout(true, 
   (res) => console.log('退出成功', res),
   (err) => console.log('退出失败', err)
 )
 
-// 获取token
-const token = getToken()
-
-// 获取刷新token
-const refreshToken = getRefreshToken()
-
-// 获取用户权限
-const permissions = getUserPermission()
-
-// 跳转到登录页【建议直接使用logout方法】
+// 跳转到登录页
 goLogin()
 
-// 获取登录URL
-const loginUrl = getLoginUrl(baseUrl, clientId, clientSecret, redirectUrl)
+// 获取当前token (Promise)
+getToken().then(token => {
+  console.log('Token:', token)
+})
 
-// 修改密码
-changePassword('newPassword', 'oldPassword')
-  .then(res => console.log('密码修改成功'))
-  .catch(err => console.log('密码修改失败'))
+// 获取刷新token (Promise)
+getRefreshToken().then(refreshToken => {
+  console.log('RefreshToken:', refreshToken)
+})
+
+// 获取用户权限信息 (Promise)
+getUserPermission().then(permissions => {
+  console.log('Permissions:', permissions)
+})
 ```
 
 ## 登录流程
@@ -357,111 +213,15 @@ changePassword('newPassword', 'oldPassword')
 3. **Token验证** - 调用后端接口验证token有效性
 4. **用户信息获取** - 获取用户权限和配置信息
 5. **状态管理** - 管理登录状态和token生命周期
-6. **错误处理** - 处理各种异常情况
-
-## 本地存储管理
-
-组件内置了智能的本地存储管理器，支持：
-
-- **自动过期** - 支持设置存储项的有效期
-- **类型安全** - 自动序列化和反序列化
-- **错误恢复** - 处理存储异常情况
-- **清理机制** - 自动清理过期数据
-
-## 配置示例
-
-### 基础配置
-
-```vue
-<qlfy-ecological-login
-  client-id="your-app-id"
-  client-secret="your-app-secret"
-  :login-page-base-address="https://sdocen.weathermate.cn:15029/auth"
-  :login-service-base-address="http://10.76.34.53:48080"
-  :use-router="router"
-/>
-```
-
-### 高级配置
-
-```vue
-<qlfy-ecological-login
-  client-id="your-app-id"
-  client-secret="your-app-secret"
-  login-page-base-address="https://sdocen.weathermate.cn:15029/auth"
-  login-service-base-address="http://10.76.34.53:48080"
-  :use-router="router"
-  :is-enabled="true"
-  :force-mode="true"
-  :listen-token="true"
-  redirect-path="系统地址"
-  token-name="custom_token"
-  :token-validity="3600"
-  @login-success="handleLoginSuccess"
-  @login-fail="handleLoginFail"
-/>
-```
-
-## 类型定义
-
-```typescript
-// 组件属性类型
-interface Prop {
-  clientId: string
-  clientSecret: string
-  loginPageBaseAddress: string
-  loginServiceBaseAddress: string
-  useRouter: any
-  forceMode?: boolean
-  token?: string
-  isEnabled?: boolean
-  listenToken?: boolean
-  redirectPath?: string
-  tokenName?: string
-  tokenValidity?: number
-}
-
-// 事件类型
-interface Emits {
-  (e: 'loggingIn', token: string): void
-  (e: 'loginFail', failInfo: any): void
-  (e: 'loginSuccess', loginInfo: any): void
-}
-```
+6. **路由拦截** - 根据登录状态和强制模式进行路由拦截
 
 ## 注意事项
 
-1. **路由依赖** - 组件依赖Vue Router，请确保正确传入router实例
-2. **Element Plus** - 组件使用了Element Plus的消息提示，会自动引入样式
-3. **网络请求** - 组件使用axios进行网络请求，请确保网络环境正常
-4. **安全性** - 请妥善保管clientId和clientSecret，不要在前端代码中硬编码
-5. **跨域问题** - 请确保登录服务支持跨域请求或配置代理
-
-## 兼容性
-
-- Vue 3.x
-- TypeScript 4.x+
-- 现代浏览器（支持ES6+）
-
-## 更新日志
-
-### v1.1.2
-- 优化登录流程
-- 修复token验证问题
-- 改进错误处理机制
-
-### v1.1.6
-
-- 文档部分描述及配置问题修改
+1. **路由依赖** - 组件依赖Vue Router，请确保正确传入router实例，且路由模式（Hash/History）会自动检测。
+2. **数据存储** - 组件内置了IndexedDB和LocalStorage的数据存储管理器，自动处理跨域和存储限制。
+3. **安全性** - 请妥善保管clientId和clientSecret。
+4. **跨域问题** - 请确保登录服务支持跨域请求或配置代理。
 
 ## 许可证
 
 MIT License
-
-## 支持
-
-如果您在使用过程中遇到问题，请提交Issue或联系开发团队。
-
-生态工程项目群统一认证登陆功能的插件，内置统一登陆跳转、统一登录token获取、token效验、用户数据配置获取、密码修改登功能；
-
-####

package/lib/components/qlfyEcologicalLogin/IndexedDBManager.d.ts

@@ -0,0 +1,72 @@
+/**
+ * IndexedDB 管理类，封装了对象的存储、读取、修改和删除功能
+ */
+export default class IndexedDBManager {
+    private dbName;
+    private storeName;
+    private version;
+    private db;
+    /**
+     * 初始化 IndexedDB 管理器
+     * @param dbName 数据库名称
+     * @param storeName 对象存储空间名称
+     * @param version 数据库版本号，默认为 1
+     */
+    constructor(dbName: string, storeName: string, version?: number);
+    /**
+     * 打开数据库连接
+     * @returns Promise<IDBDatabase> 数据库实例
+     */
+    open(): Promise<IDBDatabase>;
+    /**
+     * 关闭数据库连接
+     */
+    close(): void;
+    /**
+     * 存储数据到对象存储空间（存在则更新，不存在则插入）
+     * @param data 要存储的数据，必须包含 id 属性作为键
+     * @returns Promise<T> 存储成功后返回存储的数据
+     */
+    put<T extends {
+        id: IDBValidKey;
+    }>(data: T): Promise<T>;
+    /**
+     * 更新数据（完整对象替换）
+     * @param data 要更新的数据，必须包含 id 属性作为键
+     * @returns Promise<T> 更新成功后返回更新的数据
+     */
+    update<T extends {
+        id: IDBValidKey;
+    }>(data: T): Promise<T>;
+    /**
+     * 部分更新数据（只更新提供的字段）
+     * @param id 要更新的数据的ID
+     * @param partialData 要更新的部分字段
+     * @returns Promise<T> 更新成功后返回完整的更新后数据
+     */
+    partialUpdate<T extends {
+        id: IDBValidKey;
+    }>(id: IDBValidKey, partialData: Partial<T>): Promise<T>;
+    /**
+     * 根据 ID 读取数据
+     * @param id 数据的 ID
+     * @returns Promise<T | undefined> 找到的数据或 undefined
+     */
+    get<T>(id: IDBValidKey): Promise<T | undefined>;
+    /**
+     * 根据 ID 删除数据
+     * @param id 要删除的数据的 ID
+     * @returns Promise<void>
+     */
+    delete(id: IDBValidKey): Promise<void>;
+    /**
+     * 获取对象存储空间中的所有数据
+     * @returns Promise<T[]> 所有数据的数组
+     */
+    getAll<T>(): Promise<T[]>;
+    /**
+     * 清空对象存储空间中的所有数据
+     * @returns Promise<void>
+     */
+    clear(): Promise<void>;
+}

package/lib/components/qlfyEcologicalLogin/LocalStorageManager.d.ts

@@ -1,28 +1,29 @@
 export default class LocalStorageManager {
+    constructor();
     /**
      * 设置存储项
      * @param {string} key - 存储键名
      * @param {*} value - 存储值
      * @param {number} [seconds] - 有效期（秒）
      */
-    set(key: string, value: any, seconds?: number | undefined): void;
+    set(key: any, value: any, seconds?: any): void;
     /**
      * 获取存储项
      * @param {string} key - 要获取的键名
      * @returns {*|null} 存储值或null
      */
-    get(key: string): any;
+    get(key: any): any;
     /**
      * 获取原始存储数据（内部方法）
      * @param {string} key - 要获取的键名
      * @returns {Object|null} 包含值和过期时间的对象或null
      */
-    getRaw(key: string): any;
+    getRaw(key: any): any;
     /**
      * 删除指定存储项
      * @param {string} key - 要删除的键名
      */
-    remove(key: string): void;
+    remove(key: any): void;
     /**
      * 清空所有存储项
      */

package/lib/components/qlfyEcologicalLogin/data.d.ts

@@ -1,7 +1,21 @@
-import { DialogProps } from 'element-plus';
+import { Router } from 'vue-router';
 /** 响应式数据对象 */
 export declare class Data {
 }
+export interface LoginInfo {
+    [x: string]: any;
+    access_token: string;
+    refresh_token: string;
+    account: string;
+    nick_name: string;
+    real_name: string;
+    role_name: string;
+    role_id: string;
+    user_id: string;
+    user_name: string;
+    tenant_id: string;
+    outLogin?: boolean;
+}
 export interface Prop {
     /** 应用id，平台提供*/
     clientId: string;
@@ -12,30 +26,30 @@ export interface Prop {
     /** 登陆服务的ip地址 */
     loginServiceBaseAddress: string;
     /** 路由对象 */
-    useRouter: any;
-    /** 强制登陆模式 */
+    useRouter: Router;
+    /** 强制模式 */
     forceMode?: boolean;
-    /** 传入token则使用外部token */
+    /** 应用名称，平台提供 */
+    clientName?: string;
+    /** 传入外部登陆token */
     token?: string;
     /** 是否启用组件，支持动态控制，非必填*/
     isEnabled?: boolean;
-    /** 是否实时监听token状态，非必填*/
-    listenToken?: boolean;
-    /** 认证成功后的，非必填*/
+    /** 登陆认证成功后的跳转地址，非必填*/
     redirectPath?: string;
-    /** local中保存token值的键名称，非必填*/
-    tokenName?: string;
-    /** token有效期，单位秒，非必填*/
-    tokenValidity?: number;
     /** 租户id */
     tenantId?: number | string;
-    /** 修改密码弹窗自定义设置 */
-    dialogConfig?: Partial<DialogProps>;
+    /** 显示执行日志 */
+    showLog?: boolean;
+    openDebugger?: boolean;
 }
 export interface Emits {
-    (e: 'loggingIn', token: string): void;
-    (e: 'loginFail', failInfo: any): void;
+    (e: 'loggingIn', code: String, loginInfo?: any): void;
     (e: 'loginSuccess', loginInfo: {
         [x: string]: any;
-    }): void;
+    } | null): void;
+    (e: 'loginFail', failInfo: any): void;
+    (e: 'tokenRefresh', loginInfo: {
+        [x: string]: any;
+    } | null): void;
 }

package/lib/components/qlfyEcologicalLogin/index.vue.d.ts

@@ -1,28 +1,33 @@
 import { Prop } from './data';
-import { logout, getToken, getUserPermission } from './tools';
 declare const _default: import('vue').DefineComponent<Prop, {
-    logout: typeof logout;
-    getToken: typeof getToken;
-    getUserPermission: typeof getUserPermission;
+    logout: () => Promise<void>;
+    getToken: () => Promise<string>;
+    getLoginInfo: () => Promise<import('./data').LoginInfo>;
+    goLogin: () => Promise<void>;
 }, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {} & {
-    loggingIn: (token: string) => any;
-    loginFail: (failInfo: any) => any;
+    loggingIn: (code: String, loginInfo?: any) => any;
     loginSuccess: (loginInfo: {
         [x: string]: any;
     }) => any;
+    loginFail: (failInfo: any) => any;
+    tokenRefresh: (loginInfo: {
+        [x: string]: any;
+    }) => any;
 }, string, import('vue').PublicProps, Readonly<Prop> & Readonly<{
-    onLoggingIn?: (token: string) => any;
-    onLoginFail?: (failInfo: any) => any;
+    onLoggingIn?: (code: String, loginInfo?: any) => any;
     onLoginSuccess?: (loginInfo: {
         [x: string]: any;
     }) => any;
+    onLoginFail?: (failInfo: any) => any;
+    onTokenRefresh?: (loginInfo: {
+        [x: string]: any;
+    }) => any;
 }>, {
-    tenantId: number | string;
     forceMode: boolean;
     isEnabled: boolean;
-    listenToken: boolean;
     redirectPath: string;
-    tokenName: string;
-    tokenValidity: number;
+    tenantId: number | string;
+    showLog: boolean;
+    openDebugger: boolean;
 }, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
 export default _default;