161 lines
4.5 KiB
Markdown
161 lines
4.5 KiB
Markdown
# Token 存储位置说明
|
||
|
||
## 📍 Token 存储位置总览
|
||
|
||
Token 在项目中有 **3 个存储位置**，按读取优先级排序：
|
||
|
||
### 1. **Dev Token（开发手动输入的 token）**
|
||
- **存储位置**：`sessionStorage`
|
||
- **键名**：`DEV_MANUAL_TOKEN`
|
||
- **设置方式**：`setDevToken(token)`
|
||
- **特点**：
|
||
- 优先级最高（读取时优先使用）
|
||
- 关闭浏览器标签页后自动清除
|
||
- 用于开发测试
|
||
|
||
**浏览器查看方式：**
|
||
```javascript
|
||
// 在浏览器控制台执行
|
||
sessionStorage.getItem('DEV_MANUAL_TOKEN')
|
||
```
|
||
|
||
### 2. **正式登录的 Token（主要存储）**
|
||
- **存储位置**：`localStorage`（通过 WebStorageCache 封装）
|
||
- **键名**：
|
||
- `ACCESS_TOKEN` 或 `access_token`（访问令牌）
|
||
- `REFRESH_TOKEN` 或 `refresh_token`（刷新令牌）
|
||
- **设置方式**：`setToken({ accessToken, refreshToken })`
|
||
- **特点**：
|
||
- 持久化存储（关闭浏览器后仍然存在）
|
||
- 使用 `WebStorageCache` 库管理
|
||
- 支持大小写不同的键名变体（兼容性）
|
||
|
||
**浏览器查看方式：**
|
||
```javascript
|
||
// 在浏览器控制台执行
|
||
localStorage.getItem('ACCESS_TOKEN')
|
||
localStorage.getItem('REFRESH_TOKEN')
|
||
// 或者
|
||
localStorage.getItem('access_token')
|
||
localStorage.getItem('refresh_token')
|
||
```
|
||
|
||
**实际存储结构：**
|
||
```
|
||
localStorage:
|
||
├── ACCESS_TOKEN: "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9..."
|
||
└── REFRESH_TOKEN: "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9..."
|
||
```
|
||
|
||
### 3. **环境变量 Token（兜底）**
|
||
- **存储位置**：代码中（不存储在浏览器）
|
||
- **变量名**：`VITE_DEV_TOKEN`
|
||
- **设置方式**：`.env` 文件或环境变量
|
||
- **特点**：
|
||
- 只在代码中读取，不写入浏览器存储
|
||
- 优先级最低（前两者都没有时才使用）
|
||
- 用于开发环境默认配置
|
||
|
||
## 🔄 Token 读取优先级
|
||
|
||
当调用 `getToken()` 时，按以下顺序查找：
|
||
|
||
```
|
||
1. sessionStorage['DEV_MANUAL_TOKEN'] ← 最高优先级
|
||
↓ (如果没有)
|
||
2. localStorage['ACCESS_TOKEN'] 或 localStorage['access_token']
|
||
↓ (如果没有)
|
||
3. import.meta.env.VITE_DEV_TOKEN ← 最低优先级
|
||
```
|
||
|
||
## 📝 代码示例
|
||
|
||
### 设置 Token
|
||
|
||
```javascript
|
||
import { setToken, setDevToken } from '@gold/utils/token-manager'
|
||
|
||
// 设置正式登录的 token（存储到 localStorage）
|
||
setToken({
|
||
accessToken: 'xxx',
|
||
refreshToken: 'yyy'
|
||
})
|
||
|
||
// 设置开发 token（存储到 sessionStorage）
|
||
setDevToken('dev-token-123')
|
||
```
|
||
|
||
### 读取 Token
|
||
|
||
```javascript
|
||
import { getToken } from '@gold/utils/token-manager'
|
||
|
||
// 自动按优先级读取
|
||
const token = getToken()
|
||
```
|
||
|
||
### 清除 Token
|
||
|
||
```javascript
|
||
import { clearAllTokens } from '@gold/utils/token-manager'
|
||
|
||
// 清除所有位置的 token
|
||
clearAllTokens()
|
||
// 会清除：
|
||
// 1. sessionStorage['DEV_MANUAL_TOKEN']
|
||
// 2. localStorage['ACCESS_TOKEN'] 和 'access_token'
|
||
// 3. localStorage['REFRESH_TOKEN'] 和 'refresh_token'
|
||
```
|
||
|
||
## 🔍 在浏览器中查看
|
||
|
||
### Chrome DevTools
|
||
|
||
1. **打开 DevTools** (F12)
|
||
2. **Application 标签页**
|
||
3. **Storage 部分**：
|
||
- **Local Storage** → 查看 `ACCESS_TOKEN`、`REFRESH_TOKEN`
|
||
- **Session Storage** → 查看 `DEV_MANUAL_TOKEN`
|
||
|
||
### 控制台命令
|
||
|
||
```javascript
|
||
// 查看所有 token
|
||
console.log('Dev Token:', sessionStorage.getItem('DEV_MANUAL_TOKEN'))
|
||
console.log('Access Token:', localStorage.getItem('ACCESS_TOKEN'))
|
||
console.log('Refresh Token:', localStorage.getItem('REFRESH_TOKEN'))
|
||
|
||
// 查看所有 localStorage
|
||
console.table(localStorage)
|
||
|
||
// 查看所有 sessionStorage
|
||
console.table(sessionStorage)
|
||
```
|
||
|
||
## ⚠️ 注意事项
|
||
|
||
1. **WebStorageCache 封装**：
|
||
- `useCache()` 默认使用 `localStorage`
|
||
- 通过 `WebStorageCache` 库管理，支持过期时间等功能
|
||
- 实际存储位置仍然是 `localStorage`
|
||
|
||
2. **键名大小写**：
|
||
- 代码中统一使用 `ACCESS_TOKEN` 和 `REFRESH_TOKEN`（大写）
|
||
- 但为了兼容，也支持 `access_token` 和 `refresh_token`（小写）
|
||
- 读取时会尝试所有变体
|
||
|
||
3. **清除逻辑**：
|
||
- `clearAllTokens()` 会清除所有位置的 token
|
||
- 包括 sessionStorage、localStorage 的所有变体键名
|
||
- 确保完全清除，避免残留
|
||
|
||
## 📊 存储位置总结表
|
||
|
||
| Token 类型 | 存储位置 | 键名 | 持久化 | 优先级 |
|
||
|-----------|---------|------|--------|--------|
|
||
| Dev Token | sessionStorage | `DEV_MANUAL_TOKEN` | ❌ 关闭标签页清除 | 1 (最高) |
|
||
| Access Token | localStorage | `ACCESS_TOKEN` / `access_token` | ✅ 持久化 | 2 |
|
||
| Refresh Token | localStorage | `REFRESH_TOKEN` / `refresh_token` | ✅ 持久化 | 2 |
|
||
| Env Token | 代码中 | `VITE_DEV_TOKEN` | N/A | 3 (最低) |
|
||
|