388 lines
8.0 KiB
Markdown
388 lines
8.0 KiB
Markdown
# 未登录接口调用问题修复
|
||
|
||
## 🔍 问题描述
|
||
|
||
### 错误现象
|
||
|
||
在用户未登录时，`sys_parameter/key` 接口被调用，因为没有 token 导致接口报错。
|
||
|
||
### 错误原因
|
||
|
||
在 `demo-project/src/main.js` 的 `mounted` 钩子中，无条件调用了 `getSysTitle` action：
|
||
|
||
```javascript
|
||
mounted() {
|
||
AdminFramework.uiTool.setRem()
|
||
|
||
// ❌ 无论是否登录都调用
|
||
this.$store.dispatch('app/getSysTitle', {
|
||
defaultTitle: 'Demo 管理系统',
|
||
defaultLogo: ''
|
||
})
|
||
}
|
||
```
|
||
|
||
`getSysTitle` action 会调用后端接口：
|
||
- `paramSetupServer.getOne('sys_title')` - 获取系统标题
|
||
- `paramSetupServer.getOne('sys_logo')` - 获取系统 Logo
|
||
|
||
这些接口需要 token 认证，但在应用启动时用户可能还没登录，导致接口调用失败。
|
||
|
||
### 调用时机问题
|
||
|
||
```
|
||
应用启动
|
||
↓
|
||
Vue 实例 mounted
|
||
↓
|
||
调用 getSysTitle ← ❌ 此时可能未登录
|
||
↓
|
||
调用后端接口
|
||
↓
|
||
没有 token，接口报错 ❌
|
||
```
|
||
|
||
## ✅ 解决方案
|
||
|
||
### 方案：只在已登录时调用接口
|
||
|
||
**核心思路**：
|
||
1. 在调用 `getSysTitle` 前检查是否已登录（是否有 token）
|
||
2. 已登录：调用接口获取系统标题
|
||
3. 未登录：直接使用默认标题
|
||
|
||
### 修改 1：`demo-project/src/main.js`
|
||
|
||
**修改前**：
|
||
```javascript
|
||
mounted() {
|
||
AdminFramework.uiTool.setRem()
|
||
|
||
// ❌ 无条件调用，可能导致未登录时接口报错
|
||
this.$store.dispatch('app/getSysTitle', {
|
||
defaultTitle: 'Demo 管理系统',
|
||
defaultLogo: ''
|
||
})
|
||
}
|
||
```
|
||
|
||
**修改后**：
|
||
```javascript
|
||
mounted() {
|
||
AdminFramework.uiTool.setRem()
|
||
|
||
// ✅ 检查是否已登录
|
||
const token = this.$store.state.user.token
|
||
if (token) {
|
||
// 已登录，调用接口获取系统标题
|
||
this.$store.dispatch('app/getSysTitle', {
|
||
defaultTitle: 'Demo 管理系统',
|
||
defaultLogo: ''
|
||
})
|
||
} else {
|
||
// 未登录，直接设置默认标题
|
||
document.title = 'Demo 管理系统'
|
||
}
|
||
}
|
||
```
|
||
|
||
### 修改 2：`src/store/app.js` 的 `getSysTitle` action
|
||
|
||
**修改前**：
|
||
```javascript
|
||
async getSysTitle({ state, commit }, { defaultTitle = '智能代码平台', defaultLogo = '' }) {
|
||
let formModel = {
|
||
title: defaultTitle,
|
||
logoUrl: defaultLogo
|
||
}
|
||
|
||
try {
|
||
// ❌ 直接调用接口，不检查是否已登录
|
||
let res1 = await paramSetupServer.getOne('sys_title')
|
||
if (res1 && res1.data) {
|
||
formModel.title = res1.data.value
|
||
document.title = res1.data.value
|
||
}
|
||
let res2 = await paramSetupServer.getOne('sys_logo')
|
||
if (res2 && res2.data) {
|
||
formModel.logoUrl = res2.data.value
|
||
}
|
||
} catch (error) {
|
||
console.warn('获取系统标题失败，使用默认标题:', error || '接口调用失败')
|
||
document.title = formModel.title
|
||
}
|
||
|
||
commit('setSysTitle', formModel)
|
||
}
|
||
```
|
||
|
||
**修改后**：
|
||
```javascript
|
||
async getSysTitle({ state, commit, rootState }, { defaultTitle = '智能代码平台', defaultLogo = '' }) {
|
||
let formModel = {
|
||
title: defaultTitle,
|
||
logoUrl: defaultLogo
|
||
}
|
||
|
||
// ✅ 检查是否已登录（有 token）
|
||
const token = rootState.user.token
|
||
|
||
if (token) {
|
||
// 已登录，尝试从后端获取系统标题
|
||
try {
|
||
let res1 = await paramSetupServer.getOne('sys_title')
|
||
if (res1 && res1.data) {
|
||
formModel.title = res1.data.value
|
||
document.title = res1.data.value
|
||
}
|
||
let res2 = await paramSetupServer.getOne('sys_logo')
|
||
if (res2 && res2.data) {
|
||
formModel.logoUrl = res2.data.value
|
||
}
|
||
} catch (error) {
|
||
console.warn('获取系统标题失败，使用默认标题:', error || '接口调用失败')
|
||
document.title = formModel.title
|
||
}
|
||
} else {
|
||
// 未登录，直接使用默认标题
|
||
document.title = formModel.title
|
||
}
|
||
|
||
commit('setSysTitle', formModel)
|
||
}
|
||
```
|
||
|
||
## 📊 修复后的流程
|
||
|
||
### 未登录时
|
||
|
||
```
|
||
应用启动
|
||
↓
|
||
Vue 实例 mounted
|
||
↓
|
||
检查 token
|
||
↓
|
||
token 不存在 ✅
|
||
↓
|
||
直接设置默认标题 "Demo 管理系统"
|
||
↓
|
||
不调用后端接口 ✅
|
||
```
|
||
|
||
### 已登录时
|
||
|
||
```
|
||
应用启动
|
||
↓
|
||
Vue 实例 mounted
|
||
↓
|
||
检查 token
|
||
↓
|
||
token 存在 ✅
|
||
↓
|
||
调用 getSysTitle action
|
||
↓
|
||
检查 rootState.user.token
|
||
↓
|
||
token 存在 ✅
|
||
↓
|
||
调用后端接口获取系统标题
|
||
↓
|
||
成功：使用后端返回的标题
|
||
失败：使用默认标题
|
||
```
|
||
|
||
### 登录流程
|
||
|
||
```
|
||
用户登录
|
||
↓
|
||
保存 token 到 store
|
||
↓
|
||
刷新页面
|
||
↓
|
||
应用重新启动
|
||
↓
|
||
Vue 实例 mounted
|
||
↓
|
||
检查 token（此时有 token）✅
|
||
↓
|
||
调用 getSysTitle 获取系统标题
|
||
```
|
||
|
||
## 🎯 优化点
|
||
|
||
### 1. 双重检查
|
||
|
||
**第一层检查**（`main.js`）：
|
||
```javascript
|
||
const token = this.$store.state.user.token
|
||
if (token) {
|
||
this.$store.dispatch('app/getSysTitle', ...)
|
||
}
|
||
```
|
||
|
||
**第二层检查**（`app.js`）：
|
||
```javascript
|
||
const token = rootState.user.token
|
||
if (token) {
|
||
// 调用接口
|
||
}
|
||
```
|
||
|
||
**为什么需要双重检查？**
|
||
- 第一层：避免不必要的 action 调用
|
||
- 第二层：防止 action 被其他地方调用时没有检查 token
|
||
|
||
### 2. 默认标题处理
|
||
|
||
**未登录时**：
|
||
```javascript
|
||
document.title = 'Demo 管理系统'
|
||
```
|
||
|
||
**已登录但接口失败时**：
|
||
```javascript
|
||
document.title = formModel.title // 使用传入的 defaultTitle
|
||
```
|
||
|
||
**已登录且接口成功时**：
|
||
```javascript
|
||
document.title = res1.data.value // 使用后端返回的标题
|
||
```
|
||
|
||
### 3. 错误处理
|
||
|
||
```javascript
|
||
try {
|
||
// 调用接口
|
||
} catch (error) {
|
||
console.warn('获取系统标题失败，使用默认标题:', error || '接口调用失败')
|
||
document.title = formModel.title
|
||
}
|
||
```
|
||
|
||
即使接口调用失败，也会优雅降级到默认标题，不影响用户使用。
|
||
|
||
## ✅ 验证清单
|
||
|
||
### 未登录场景
|
||
|
||
- ✅ 访问首页显示登录页面
|
||
- ✅ 页面标题显示 "Demo 管理系统"
|
||
- ✅ 控制台没有接口报错
|
||
- ✅ Network 标签中没有 `sys_parameter/key` 请求
|
||
|
||
### 已登录场景
|
||
|
||
- ✅ 登录成功后刷新页面
|
||
- ✅ 页面标题显示系统标题（如果后端有配置）
|
||
- ✅ 如果后端接口失败，显示默认标题
|
||
- ✅ 系统 Logo 正确显示（如果后端有配置）
|
||
|
||
### 登录流程
|
||
|
||
- ✅ 输入用户名密码
|
||
- ✅ 点击登录
|
||
- ✅ 登录成功
|
||
- ✅ 页面刷新
|
||
- ✅ 进入系统首页
|
||
- ✅ 系统标题正确显示
|
||
|
||
## 💡 最佳实践
|
||
|
||
### 1. 接口调用前检查认证状态
|
||
|
||
```javascript
|
||
// ✅ 好的做法
|
||
if (token) {
|
||
await api.getData()
|
||
}
|
||
|
||
// ❌ 不好的做法
|
||
try {
|
||
await api.getData() // 可能因为没有 token 而失败
|
||
} catch (error) {
|
||
// 处理错误
|
||
}
|
||
```
|
||
|
||
### 2. 提供默认值
|
||
|
||
```javascript
|
||
// ✅ 好的做法
|
||
const title = res.data?.value || defaultTitle
|
||
|
||
// ❌ 不好的做法
|
||
const title = res.data.value // 可能是 undefined
|
||
```
|
||
|
||
### 3. 优雅降级
|
||
|
||
```javascript
|
||
// ✅ 好的做法
|
||
if (token) {
|
||
try {
|
||
const data = await api.getData()
|
||
useData(data)
|
||
} catch (error) {
|
||
useDefaultData()
|
||
}
|
||
} else {
|
||
useDefaultData()
|
||
}
|
||
```
|
||
|
||
### 4. 避免不必要的请求
|
||
|
||
```javascript
|
||
// ✅ 好的做法
|
||
if (needData && token) {
|
||
await api.getData()
|
||
}
|
||
|
||
// ❌ 不好的做法
|
||
await api.getData() // 无论是否需要都请求
|
||
```
|
||
|
||
## 🔧 相关修改
|
||
|
||
### 其他可能需要检查的地方
|
||
|
||
如果项目中还有其他在应用启动时调用的接口，也需要检查是否需要 token：
|
||
|
||
1. **检查 `main.js` 的 `mounted` 钩子**
|
||
- 确保所有接口调用都检查了 token
|
||
|
||
2. **检查 `App.vue` 的 `mounted` 钩子**
|
||
- 确保没有未登录时调用需要认证的接口
|
||
|
||
3. **检查路由守卫**
|
||
- 确保路由守卫正确处理未登录的情况
|
||
|
||
4. **检查 Vuex actions**
|
||
- 确保需要认证的 actions 都检查了 token
|
||
|
||
## 📝 总结
|
||
|
||
### 修复的问题
|
||
|
||
- ✅ 未登录时不再调用需要认证的接口
|
||
- ✅ 避免了接口报错
|
||
- ✅ 提供了优雅的降级方案
|
||
- ✅ 改善了用户体验
|
||
|
||
### 代码改进
|
||
|
||
- **更健壮**：双重检查确保不会在未登录时调用接口
|
||
- **更友好**：即使接口失败也能正常显示默认标题
|
||
- **更清晰**：代码逻辑更容易理解和维护
|
||
|
||
---
|
||
|
||
**未登录接口调用问题已修复！** 🎉
|
||
|
||
现在系统会智能判断是否已登录，只在必要时调用后端接口。
|
||
|