qlfy-ecological-login 1.1.2 → 1.1.4
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +428 -83
- package/lib/components/qlfyEcologicalLogin/tools.d.ts +9 -0
- package/lib/index.mjs +387 -354
- package/lib/index.mjs.gz +0 -0
- package/lib/index.umd.js +7 -7
- package/lib/index.umd.js.gz +0 -0
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -1,120 +1,465 @@
|
|
|
1
|
-
|
|
1
|
+
# qlfy-ecological-login
|
|
2
2
|
|
|
3
|
-
|
|
3
|
+
山东生态统一登录Vue3组件 - 提供完整的OAuth2统一认证解决方案
|
|
4
4
|
|
|
5
|
-
|
|
5
|
+
## 简介
|
|
6
6
|
|
|
7
|
-
|
|
8
|
-
|
|
7
|
+
`qlfy-ecological-login` 是一个专为山东生态系统设计的Vue3统一登录组件，基于OAuth2协议实现，提供了完整的用户认证流程管理。该组件支持自动token管理、权限获取、登录状态监听等功能，可以快速集成到Vue3项目中。
|
|
8
|
+
|
|
9
|
+
## 特性
|
|
10
|
+
|
|
11
|
+
- 🔐 **OAuth2认证** - 基于标准OAuth2协议的统一登录
|
|
12
|
+
- 🚀 **Vue3支持** - 完全基于Vue3 Composition API开发
|
|
13
|
+
- 📦 **TypeScript** - 完整的TypeScript类型支持
|
|
14
|
+
- 🔄 **自动Token管理** - 自动处理token存储、刷新和过期
|
|
15
|
+
- 👥 **权限管理** - 获取和管理用户权限信息
|
|
16
|
+
- 🎯 **灵活配置** - 支持多种配置模式和自定义参数
|
|
17
|
+
- 📱 **状态监听** - 实时监听登录状态变化
|
|
18
|
+
- 🛡️ **安全可靠** - 内置安全机制和错误处理
|
|
19
|
+
|
|
20
|
+
## 安装
|
|
21
|
+
|
|
22
|
+
```bash
|
|
23
|
+
npm install qlfy-ecological-login
|
|
9
24
|
```
|
|
10
25
|
|
|
11
|
-
|
|
26
|
+
## 快速开始
|
|
27
|
+
|
|
28
|
+
### 1. 全局注册
|
|
29
|
+
|
|
30
|
+
```javascript
|
|
31
|
+
import { createApp } from 'vue'
|
|
32
|
+
import App from './App.vue'
|
|
33
|
+
import qlfyEcologicalLogin from 'qlfy-ecological-login'
|
|
34
|
+
|
|
35
|
+
const app = createApp(App)
|
|
36
|
+
app.use(qlfyEcologicalLogin)
|
|
37
|
+
app.mount('#app')
|
|
38
|
+
```
|
|
12
39
|
|
|
13
|
-
|
|
40
|
+
### 2. 组件使用
|
|
14
41
|
|
|
15
42
|
```vue
|
|
16
43
|
<template>
|
|
17
|
-
<div
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
client-
|
|
21
|
-
|
|
22
|
-
login-
|
|
23
|
-
:
|
|
24
|
-
|
|
25
|
-
@login-success="
|
|
26
|
-
|
|
27
|
-
|
|
44
|
+
<div>
|
|
45
|
+
<!-- 统一登录组件 -->
|
|
46
|
+
<qlfy-ecological-login
|
|
47
|
+
:client-id="clientId"
|
|
48
|
+
:client-secret="clientSecret"
|
|
49
|
+
:login-page-base-address="https://sdocen.weathermate.cn:15029/auth"
|
|
50
|
+
:login-service-base-address="http://58.59.29.50:15041"
|
|
51
|
+
:use-router="router"
|
|
52
|
+
@login-success="handleLoginSuccess"
|
|
53
|
+
@login-fail="handleLoginFail"
|
|
54
|
+
@logging-in="handleLoggingIn"
|
|
55
|
+
/>
|
|
56
|
+
|
|
57
|
+
<!-- 你的应用内容 -->
|
|
58
|
+
<router-view />
|
|
28
59
|
</div>
|
|
29
60
|
</template>
|
|
30
61
|
|
|
31
|
-
<script setup
|
|
32
|
-
import {
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
const
|
|
39
|
-
|
|
40
|
-
const
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
62
|
+
<script setup>
|
|
63
|
+
import { useRouter } from 'vue-router'
|
|
64
|
+
|
|
65
|
+
const router = useRouter()
|
|
66
|
+
|
|
67
|
+
// 配置参数
|
|
68
|
+
const clientId = 'your-client-id'
|
|
69
|
+
const clientSecret = 'your-client-secret'
|
|
70
|
+
const loginPageUrl = 'https://login.example.com'
|
|
71
|
+
const loginServiceUrl = 'https://api.example.com'
|
|
72
|
+
|
|
73
|
+
// 事件处理
|
|
74
|
+
const handleLoginSuccess = (userInfo) => {
|
|
75
|
+
console.log('登录成功:', userInfo)
|
|
44
76
|
}
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
77
|
+
|
|
78
|
+
const handleLoginFail = (error) => {
|
|
79
|
+
console.log('登录失败:', error)
|
|
80
|
+
}
|
|
81
|
+
|
|
82
|
+
const handleLoggingIn = (token) => {
|
|
83
|
+
console.log('正在登录:', token)
|
|
48
84
|
}
|
|
49
85
|
</script>
|
|
86
|
+
```
|
|
87
|
+
|
|
88
|
+
## API 文档
|
|
89
|
+
|
|
90
|
+
### 组件属性 (Props)
|
|
91
|
+
|
|
92
|
+
| 属性名 | 类型 | 必填 | 默认值 | 说明 |
|
|
93
|
+
|--------|------|------|--------|------|
|
|
94
|
+
| `clientId` | `string` | ✅ | - | 应用ID，由平台提供 |
|
|
95
|
+
| `clientSecret` | `string` | ✅ | - | 应用密钥，由平台提供 |
|
|
96
|
+
| `loginPageBaseAddress` | `string` | ✅ | - | 统一登录页面的基础地址 |
|
|
97
|
+
| `loginServiceBaseAddress` | `string` | ✅ | - | 登录服务的基础地址 |
|
|
98
|
+
| `useRouter` | `Router` | ✅ | - | Vue Router实例 |
|
|
99
|
+
| `isEnabled` | `boolean` | ❌ | `true` | 是否启用组件，支持动态控制 |
|
|
100
|
+
| `forceMode` | `boolean` | ❌ | `true` | 强制登录模式 |
|
|
101
|
+
| `token` | `string` | ❌ | - | 外部传入的token |
|
|
102
|
+
| `listenToken` | `boolean` | ❌ | `false` | 是否实时监听token状态 |
|
|
103
|
+
| `redirectPath` | `string` | ❌ | `''` | 认证成功后的重定向路径 |
|
|
104
|
+
| `tokenName` | `string` | ❌ | `'access_token'` | 本地存储token的键名 |
|
|
105
|
+
| `tokenValidity` | `number` | ❌ | `7200` | token有效期（秒） |
|
|
50
106
|
|
|
51
|
-
|
|
107
|
+
### 组件事件 (Events)
|
|
52
108
|
|
|
109
|
+
| 事件名 | 参数 | 说明 |
|
|
110
|
+
|--------|------|------|
|
|
111
|
+
| `loginSuccess` | `(userInfo: any)` | 登录成功时触发 |
|
|
112
|
+
| `loginFail` | `(error: any)` | 登录失败时触发 |
|
|
113
|
+
| `loggingIn` | `(token: string)` | 正在登录时触发 |
|
|
114
|
+
|
|
115
|
+
#### 事件触发机制详解
|
|
116
|
+
|
|
117
|
+
**1. `loggingIn` 事件**
|
|
118
|
+
- **触发时机**: 组件初始化加载
|
|
119
|
+
- **触发条件**: 可从插件参数、url或缓存中获取到token
|
|
120
|
+
- **参数说明**: 当前获取到的token值
|
|
121
|
+
- **使用场景**: 显示登录加载状态，提示用户正在处理登录信息
|
|
122
|
+
|
|
123
|
+
```javascript
|
|
124
|
+
const handleLoggingIn = (token) => {
|
|
125
|
+
console.log('正在处理登录，token:', token)
|
|
126
|
+
// 显示加载动画
|
|
127
|
+
showLoading()
|
|
128
|
+
}
|
|
53
129
|
```
|
|
54
130
|
|
|
55
|
-
|
|
131
|
+
**2. `loginSuccess` 事件**
|
|
132
|
+
- **触发时机**: 插件首次完成完整登录流程后，包括token验证和用户权限获取
|
|
133
|
+
- **触发条件**:
|
|
134
|
+
|
|
135
|
+
- token验证通过（后端返回code为0）
|
|
136
|
+
- 用户权限信息获取成功
|
|
137
|
+
- **参数说明**: 包含用户权限和配置信息的完整对象
|
|
138
|
+
- **数据结构**:
|
|
139
|
+
```typescript
|
|
140
|
+
{
|
|
141
|
+
code: number,
|
|
142
|
+
data: {
|
|
143
|
+
user: any, // 用户基本信息
|
|
144
|
+
permissions: any, // 用户权限列表
|
|
145
|
+
roles: any, // 用户角色信息
|
|
146
|
+
menus: any // 菜单权限
|
|
147
|
+
}
|
|
148
|
+
}
|
|
149
|
+
```
|
|
150
|
+
- **使用场景**: 保存用户信息到全局状态，初始化应用权限，跳转到主页面
|
|
56
151
|
|
|
57
|
-
|
|
152
|
+
```javascript
|
|
153
|
+
const handleLoginSuccess = (userInfo) => {
|
|
154
|
+
// 保存用户信息到状态管理
|
|
155
|
+
store.commit('setUserInfo', userInfo.data)
|
|
156
|
+
|
|
157
|
+
// 初始化权限
|
|
158
|
+
initPermissions(userInfo.data.permissions)
|
|
159
|
+
|
|
160
|
+
// 跳转到主页面
|
|
161
|
+
router.push('/dashboard')
|
|
162
|
+
|
|
163
|
+
// 隐藏加载动画
|
|
164
|
+
hideLoading()
|
|
165
|
+
}
|
|
166
|
+
```
|
|
58
167
|
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
168
|
+
**3. `loginFail` 事件**
|
|
169
|
+
- **触发时机**: 登录流程中任何步骤失败时
|
|
170
|
+
- **触发条件**:
|
|
171
|
+
- 传入的token参数验证失败（后端返回非0状态码）
|
|
172
|
+
- 用户权限获取失败
|
|
173
|
+
- 网络请求异常
|
|
174
|
+
- 在非强制模式下无有效token时（强制模式下token无效跳转统一认证页面）
|
|
175
|
+
- 在非强制模式下token有效，但用户配置获取失败（强制模式下配置获取失败跳转统一认证页面）
|
|
176
|
+
- **解额决参数说明**: 包含错误信息的对象
|
|
177
|
+
- **错误类型**:
|
|
178
|
+
|
|
179
|
+
```typescript
|
|
180
|
+
{
|
|
181
|
+
msg: string, // 错误描述信息
|
|
182
|
+
data: any, // 详细错误数据（可能为null）
|
|
183
|
+
code?: number // 错误代码（如果有）
|
|
184
|
+
}
|
|
185
|
+
```
|
|
186
|
+
- **使用场景**: 显示错误提示，记录错误日志，处理登录失败逻辑
|
|
187
|
+
|
|
188
|
+
```javascript
|
|
189
|
+
const handleLoginFail = (error) => {
|
|
190
|
+
console.error('登录失败:', error)
|
|
191
|
+
|
|
192
|
+
// 显示错误提示
|
|
193
|
+
ElMessage.error(error.msg || '登录失败，请重试')
|
|
194
|
+
|
|
195
|
+
// 记录错误日志
|
|
196
|
+
logError('Login failed', error)
|
|
197
|
+
|
|
198
|
+
// 隐藏加载动画
|
|
199
|
+
hideLoading()
|
|
200
|
+
|
|
201
|
+
// 根据错误类型处理
|
|
202
|
+
if (error.msg.includes('Token验证失败')) {
|
|
203
|
+
// 清除本地token，重新登录
|
|
204
|
+
clearLocalToken()
|
|
205
|
+
}
|
|
206
|
+
}
|
|
64
207
|
```
|
|
65
208
|
|
|
209
|
+
#### 事件流程图
|
|
66
210
|
|
|
211
|
+
```
|
|
212
|
+
页面加载/路由变化
|
|
213
|
+
↓
|
|
214
|
+
检查登录状态
|
|
215
|
+
↓
|
|
216
|
+
发现参数、URL或缓存中有token
|
|
217
|
+
↓
|
|
218
|
+
触发 loggingIn 事件 ← 显示加载状态
|
|
219
|
+
↓
|
|
220
|
+
验证token
|
|
221
|
+
↓
|
|
222
|
+
┌─────────────┐
|
|
223
|
+
│ 验证结果 │
|
|
224
|
+
└─────────────┘
|
|
225
|
+
↓ ↓
|
|
226
|
+
成功 失败
|
|
227
|
+
↓ ↓
|
|
228
|
+
获取用户权限 触发 loginFail 事件
|
|
229
|
+
↓
|
|
230
|
+
触发 loginSuccess 事件
|
|
231
|
+
```
|
|
232
|
+
|
|
233
|
+
#### 最佳实践
|
|
234
|
+
|
|
235
|
+
1. **统一错误处理**: 在`loginFail`事件中统一处理各种登录错误
|
|
236
|
+
2. **加载状态管理**: 配合`loggingIn`和`loginSuccess`/`loginFail`事件管理加载状态
|
|
237
|
+
3. **权限初始化**: 在`loginSuccess`事件中完成权限系统的初始化
|
|
238
|
+
4. **错误日志**: 记录详细的错误信息便于问题排查
|
|
239
|
+
5. **用户体验**: 提供清晰的状态反馈和错误提示
|
|
240
|
+
|
|
241
|
+
### 组件方法 (Methods)
|
|
242
|
+
|
|
243
|
+
通过组件ref可以调用以下方法：
|
|
244
|
+
|
|
245
|
+
```javascript
|
|
246
|
+
// 获取组件实例
|
|
247
|
+
const loginRef = ref()
|
|
248
|
+
|
|
249
|
+
// 退出登录
|
|
250
|
+
loginRef.value.logout()
|
|
251
|
+
|
|
252
|
+
// 获取当前token
|
|
253
|
+
const token = loginRef.value.getToken()
|
|
254
|
+
|
|
255
|
+
// 获取用户权限信息
|
|
256
|
+
const permissions = loginRef.value.getUserPermission()
|
|
257
|
+
```
|
|
67
258
|
|
|
68
|
-
|
|
259
|
+
## 工具函数
|
|
69
260
|
|
|
70
|
-
|
|
71
|
-
| ----------------------- | ------------------------------------------------------------ | ------------------ | -------------- |
|
|
72
|
-
| clientId | 应用id，统一认证平台提供，必填 | string | —— |
|
|
73
|
-
| clientSecret | 应用秘钥，统一认证平台提供，必填 | string | —— |
|
|
74
|
-
| loginPageBaseAddress | 登陆页面基础地址，必填 | string | —— |
|
|
75
|
-
| loginServiceBaseAddress | 登录服务基础地址，必填 | string | —— |
|
|
76
|
-
| useRouter | 路由对象，传入vue-Router的useRouter()值 | Router | —— |
|
|
77
|
-
| loginMode | 登陆模式<br />如果设置为part模式，未登陆状态不跳 | 'part' \| 'global' | 'global' |
|
|
78
|
-
| forceMode | 强制登陆模式 | boolean | true |
|
|
79
|
-
| token | 自定义token<br />传入该值后，如果token有效，不跳登陆直接使用该token<br />兼容CA的token<br /> | stirng | ‘’ |
|
|
80
|
-
| isEnabled | 是否启用组件，支持动态控制 | boolean | true |
|
|
81
|
-
| listenToken | 实时监听token状态<br />1s检测一次token是否存在，丢失触发重新获取 | boolean | false |
|
|
82
|
-
| redirectPath | 统一登陆成功后，跳转的地址；<br />如不设置，默认跳转至触发登陆的页面 | string | ‘’ |
|
|
83
|
-
| tokenName | local中保存token值的键名称 | string | 'access_token' |
|
|
84
|
-
| tokenValidity | token过期时间，单位秒<br />如该时间内无页面跳转操作则重新触发登陆 | number | 1800 |
|
|
85
|
-
| tenantId | 租户id<br />非特殊要求不需传该参数 | number | ‘’ |
|
|
261
|
+
组件还提供了一系列工具函数，可以在应用的任何地方使用：
|
|
86
262
|
|
|
87
|
-
|
|
263
|
+
### 工具函数API表格
|
|
88
264
|
|
|
89
|
-
|
|
|
90
|
-
|
|
91
|
-
|
|
|
92
|
-
|
|
|
93
|
-
|
|
|
265
|
+
| 函数名 | 参数 | 返回值 | 说明 |
|
|
266
|
+
|--------|------|--------|------|
|
|
267
|
+
| `logout` | `isGoLog?: boolean`, `success?: (res) => void`, `error?: (err) => void` | `void` | 退出登录，可选择是否跳转登录页 |
|
|
268
|
+
| `getToken` | 无 | `string \| null` | 获取当前存储的访问token |
|
|
269
|
+
| `getRefreshToken` | 无 | `string \| undefined` | 获取刷新token |
|
|
270
|
+
| `getUserPermission` | 无 | `any` | 获取当前用户的权限信息 |
|
|
271
|
+
| `goLogin` | 无 | `void` | 跳转到统一登录页面 |
|
|
272
|
+
| `getLoginUrl` | `loginPageBaseAddress: string`, `clientId: string`, `clientSecret: string`, `redirectUrl?: string` | `string` | 生成登录页面URL |
|
|
273
|
+
| `changePassword` | `newPassword: string`, `oldPassword: string` | `Promise<any>` | 修改用户密码 |
|
|
94
274
|
|
|
95
|
-
|
|
275
|
+
### 详细说明
|
|
96
276
|
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
277
|
+
#### `logout(isGoLog?, success?, error?)`
|
|
278
|
+
**功能**: 退出当前登录状态
|
|
279
|
+
- `isGoLog`: 是否在退出后跳转到登录页，默认为true
|
|
280
|
+
- `success`: 退出成功的回调函数
|
|
281
|
+
- `error`: 退出失败的回调函数
|
|
102
282
|
|
|
103
|
-
####
|
|
283
|
+
#### `getToken()`
|
|
284
|
+
**功能**: 获取当前用户的访问token
|
|
285
|
+
- 返回存储在本地的token，如果不存在或已过期则返回null
|
|
104
286
|
|
|
105
|
-
|
|
287
|
+
#### `getRefreshToken()`
|
|
288
|
+
**功能**: 获取用于刷新访问token的刷新token
|
|
289
|
+
- 返回刷新token，用于token续期
|
|
106
290
|
|
|
107
|
-
|
|
291
|
+
#### `getUserPermission()`
|
|
292
|
+
**功能**: 获取当前用户的权限信息
|
|
293
|
+
- 返回包含用户权限、角色、菜单等信息的对象
|
|
108
294
|
|
|
295
|
+
#### `goLogin()`
|
|
296
|
+
**功能**: 跳转到统一登录页面
|
|
297
|
+
- 自动构建登录URL并在当前窗口打开
|
|
298
|
+
|
|
299
|
+
#### `getLoginUrl(loginPageBaseAddress, clientId, clientSecret, redirectUrl?)`
|
|
300
|
+
**功能**: 生成登录页面的完整URL
|
|
301
|
+
- `loginPageBaseAddress`: 登录页面的基础地址
|
|
302
|
+
- `clientId`: 应用ID
|
|
303
|
+
- `clientSecret`: 应用密钥
|
|
304
|
+
- `redirectUrl`: 登录成功后的重定向地址，默认为当前页面
|
|
305
|
+
|
|
306
|
+
#### `changePassword(newPassword, oldPassword)`
|
|
307
|
+
**功能**: 修改用户密码
|
|
308
|
+
- `newPassword`: 新密码
|
|
309
|
+
- `oldPassword`: 原密码
|
|
310
|
+
- 返回Promise，成功时resolve，失败时reject
|
|
311
|
+
|
|
312
|
+
```javascript
|
|
313
|
+
import {
|
|
314
|
+
logout,
|
|
315
|
+
getToken,
|
|
316
|
+
getRefreshToken,
|
|
317
|
+
getUserPermission,
|
|
318
|
+
goLogin,
|
|
319
|
+
getLoginUrl,
|
|
320
|
+
changePassword
|
|
321
|
+
} from 'qlfy-ecological-login'
|
|
322
|
+
|
|
323
|
+
// 退出登录
|
|
324
|
+
logout(true,
|
|
325
|
+
(res) => console.log('退出成功', res),
|
|
326
|
+
(err) => console.log('退出失败', err)
|
|
327
|
+
)
|
|
328
|
+
|
|
329
|
+
// 获取token
|
|
330
|
+
const token = getToken()
|
|
331
|
+
|
|
332
|
+
// 获取刷新token
|
|
333
|
+
const refreshToken = getRefreshToken()
|
|
334
|
+
|
|
335
|
+
// 获取用户权限
|
|
336
|
+
const permissions = getUserPermission()
|
|
337
|
+
|
|
338
|
+
// 跳转到登录页【建议直接使用logout方法】
|
|
339
|
+
goLogin()
|
|
340
|
+
|
|
341
|
+
// 获取登录URL
|
|
342
|
+
const loginUrl = getLoginUrl(baseUrl, clientId, clientSecret, redirectUrl)
|
|
343
|
+
|
|
344
|
+
// 修改密码
|
|
345
|
+
changePassword('newPassword', 'oldPassword')
|
|
346
|
+
.then(res => console.log('密码修改成功'))
|
|
347
|
+
.catch(err => console.log('密码修改失败'))
|
|
348
|
+
```
|
|
349
|
+
|
|
350
|
+
## 登录流程
|
|
351
|
+
|
|
352
|
+
组件实现了完整的OAuth2登录流程：
|
|
353
|
+
|
|
354
|
+
1. **初始化检查** - 检查组件是否启用
|
|
355
|
+
2. **Token优先级** - 按优先级检查token来源：
|
|
356
|
+
- 外部传入的token（最高优先级）
|
|
357
|
+
- URL参数中的token（从登录页返回）
|
|
358
|
+
- 本地缓存的token
|
|
359
|
+
3. **Token验证** - 调用后端接口验证token有效性
|
|
360
|
+
4. **用户信息获取** - 获取用户权限和配置信息
|
|
361
|
+
5. **状态管理** - 管理登录状态和token生命周期
|
|
362
|
+
6. **错误处理** - 处理各种异常情况
|
|
363
|
+
|
|
364
|
+
## 本地存储管理
|
|
365
|
+
|
|
366
|
+
组件内置了智能的本地存储管理器，支持：
|
|
367
|
+
|
|
368
|
+
- **自动过期** - 支持设置存储项的有效期
|
|
369
|
+
- **类型安全** - 自动序列化和反序列化
|
|
370
|
+
- **错误恢复** - 处理存储异常情况
|
|
371
|
+
- **清理机制** - 自动清理过期数据
|
|
372
|
+
|
|
373
|
+
## 配置示例
|
|
374
|
+
|
|
375
|
+
### 基础配置
|
|
376
|
+
|
|
377
|
+
```vue
|
|
378
|
+
<qlfy-ecological-login
|
|
379
|
+
client-id="your-app-id"
|
|
380
|
+
client-secret="your-app-secret"
|
|
381
|
+
:login-page-base-address="https://sdocen.weathermate.cn:15029/auth"
|
|
382
|
+
:login-service-base-address="http://58.59.29.50:15041"
|
|
383
|
+
:use-router="router"
|
|
384
|
+
/>
|
|
109
385
|
```
|
|
110
|
-
|
|
386
|
+
|
|
387
|
+
### 高级配置
|
|
388
|
+
|
|
389
|
+
```vue
|
|
390
|
+
<qlfy-ecological-login
|
|
391
|
+
client-id="your-app-id"
|
|
392
|
+
client-secret="your-app-secret"
|
|
393
|
+
:login-page-base-address="https://sdocen.weathermate.cn:15029/auth"
|
|
394
|
+
:login-service-base-address="http://58.59.29.50:15041"
|
|
395
|
+
:use-router="router"
|
|
396
|
+
:is-enabled="true"
|
|
397
|
+
:force-mode="true"
|
|
398
|
+
:listen-token="true"
|
|
399
|
+
redirect-path="系统地址"
|
|
400
|
+
token-name="custom_token"
|
|
401
|
+
:token-validity="3600"
|
|
402
|
+
@login-success="handleLoginSuccess"
|
|
403
|
+
@login-fail="handleLoginFail"
|
|
404
|
+
/>
|
|
111
405
|
```
|
|
112
406
|
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
407
|
+
## 类型定义
|
|
408
|
+
|
|
409
|
+
```typescript
|
|
410
|
+
// 组件属性类型
|
|
411
|
+
interface Prop {
|
|
412
|
+
clientId: string
|
|
413
|
+
clientSecret: string
|
|
414
|
+
loginPageBaseAddress: string
|
|
415
|
+
loginServiceBaseAddress: string
|
|
416
|
+
useRouter: any
|
|
417
|
+
forceMode?: boolean
|
|
418
|
+
token?: string
|
|
419
|
+
isEnabled?: boolean
|
|
420
|
+
listenToken?: boolean
|
|
421
|
+
redirectPath?: string
|
|
422
|
+
tokenName?: string
|
|
423
|
+
tokenValidity?: number
|
|
424
|
+
}
|
|
425
|
+
|
|
426
|
+
// 事件类型
|
|
427
|
+
interface Emits {
|
|
428
|
+
(e: 'loggingIn', token: string): void
|
|
429
|
+
(e: 'loginFail', failInfo: any): void
|
|
430
|
+
(e: 'loginSuccess', loginInfo: any): void
|
|
431
|
+
}
|
|
432
|
+
```
|
|
433
|
+
|
|
434
|
+
## 注意事项
|
|
435
|
+
|
|
436
|
+
1. **路由依赖** - 组件依赖Vue Router，请确保正确传入router实例
|
|
437
|
+
2. **Element Plus** - 组件使用了Element Plus的消息提示，会自动引入样式
|
|
438
|
+
3. **网络请求** - 组件使用axios进行网络请求，请确保网络环境正常
|
|
439
|
+
4. **安全性** - 请妥善保管clientId和clientSecret，不要在前端代码中硬编码
|
|
440
|
+
5. **跨域问题** - 请确保登录服务支持跨域请求或配置代理
|
|
441
|
+
|
|
442
|
+
## 兼容性
|
|
443
|
+
|
|
444
|
+
- Vue 3.x
|
|
445
|
+
- TypeScript 4.x+
|
|
446
|
+
- 现代浏览器（支持ES6+）
|
|
447
|
+
|
|
448
|
+
## 更新日志
|
|
449
|
+
|
|
450
|
+
### v1.1.2
|
|
451
|
+
- 优化登录流程
|
|
452
|
+
- 修复token验证问题
|
|
453
|
+
- 改进错误处理机制
|
|
454
|
+
|
|
455
|
+
## 许可证
|
|
456
|
+
|
|
457
|
+
MIT License
|
|
458
|
+
|
|
459
|
+
## 支持
|
|
460
|
+
|
|
461
|
+
如果您在使用过程中遇到问题，请提交Issue或联系开发团队。
|
|
462
|
+
|
|
463
|
+
生态工程项目群统一认证登陆功能的插件，内置统一登陆跳转、统一登录token获取、token效验、用户数据配置获取、密码修改登功能；
|
|
464
|
+
|
|
465
|
+
####
|
|
@@ -23,6 +23,7 @@ interface LoginInfo {
|
|
|
23
23
|
refreshToken?: string;
|
|
24
24
|
userPermission: any;
|
|
25
25
|
props: any;
|
|
26
|
+
routerMode: string;
|
|
26
27
|
}
|
|
27
28
|
/** 登陆数据存储 */
|
|
28
29
|
export declare function setLoginInfo(dataInfo: LoginInfo): void;
|
|
@@ -34,4 +35,12 @@ export declare function getLoginInfo(): LoginInfo;
|
|
|
34
35
|
export declare function clearLoginData(): void;
|
|
35
36
|
/** ----------------------- 密码修改 ---------------------- */
|
|
36
37
|
export declare function changePassword(newPassword: string, oldPassword: string): Promise<any>;
|
|
38
|
+
/**
|
|
39
|
+
* 移除URL中指定的参数，不刷新页面
|
|
40
|
+
* @param {string} routerMode - 路由模式，'hash' 或 'history'
|
|
41
|
+
* @param {string[]} paramsToRemove - 需要移除的参数名称数组
|
|
42
|
+
*/
|
|
43
|
+
/** 检测当前路由模式 */
|
|
44
|
+
export declare function detectRouterMode(): 'hash' | 'history';
|
|
45
|
+
export declare function removeUrlParams(paramsToRemove: string[], routerMode?: string): void;
|
|
37
46
|
export {};
|