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年
|