71 lines
1.8 KiB
Markdown
71 lines
1.8 KiB
Markdown
# 401未授权错误解决方案
|
||
|
||
## 问题原因
|
||
|
||
控制台出现401错误的原因：
|
||
1. **未登录**：用户还没有登录，但前端代码尝试获取用户信息和工作流列表
|
||
2. **Token过期**：之前的token已过期或无效
|
||
3. **Token丢失**：localStorage中的token被清除
|
||
|
||
## 已修复
|
||
|
||
### 1. 优化Home页面数据获取逻辑 ✅
|
||
|
||
修改了 `Home.vue`，确保：
|
||
- 只有在有token的情况下才尝试获取数据
|
||
- 如果获取用户信息失败，自动清除token并跳转到登录页
|
||
- 只有在成功获取用户信息后才获取工作流列表
|
||
|
||
### 2. 优化用户信息获取 ✅
|
||
|
||
修改了 `user.ts` 中的 `fetchUser` 函数：
|
||
- 如果401错误，自动清除token
|
||
- 更好的错误处理
|
||
|
||
## 解决方案
|
||
|
||
### 如果看到401错误：
|
||
|
||
1. **检查是否已登录**
|
||
- 如果未登录，请先登录
|
||
- 登录后token会自动保存
|
||
|
||
2. **清除旧的token**
|
||
- 打开浏览器控制台（F12）
|
||
- 在Console中输入：`localStorage.removeItem('token')`
|
||
- 刷新页面，重新登录
|
||
|
||
3. **检查登录状态**
|
||
- 打开浏览器控制台（F12）
|
||
- 在Console中输入：`localStorage.getItem('token')`
|
||
- 如果有值，说明token存在
|
||
- 如果为null，说明需要重新登录
|
||
|
||
## 正常流程
|
||
|
||
1. **访问首页** → 如果没有token，自动跳转到登录页
|
||
2. **登录** → 获取token并保存
|
||
3. **自动跳转** → 跳转到首页
|
||
4. **获取数据** → 使用token获取用户信息和工作流列表
|
||
|
||
## 测试步骤
|
||
|
||
1. **清除token**（如果需要）：
|
||
```javascript
|
||
localStorage.removeItem('token')
|
||
```
|
||
|
||
2. **刷新页面** → 应该自动跳转到登录页
|
||
|
||
3. **登录** → 输入用户名和密码
|
||
|
||
4. **检查** → 登录成功后应该：
|
||
- 自动跳转到首页
|
||
- 不再出现401错误
|
||
- 显示工作流列表
|
||
|
||
---
|
||
|
||
**状态**: ✅ 已修复
|
||
**时间**: 2024年
|