252 lines
7.4 KiB
Markdown
252 lines
7.4 KiB
Markdown
# 登录流程说明
|
||
|
||
## 当前登录策略
|
||
|
||
### 1. 应用启动
|
||
- ✅ 直接进入首页，**不检查登录状态**
|
||
- ✅ 允许游客浏览首页内容
|
||
- ✅ 允许游客浏览预约页面（tabBar）
|
||
|
||
### 2. 需要登录的操作
|
||
以下操作会触发登录检查，未登录时会提示并跳转到登录页：
|
||
|
||
#### 首页
|
||
- 点击服务项目进入详情页
|
||
|
||
#### 预约页面
|
||
- 点击具体服务项目
|
||
- 提交预约表单
|
||
|
||
#### 个人中心
|
||
- 查看通知
|
||
- 邀请奖励
|
||
- 查看预约记录
|
||
- 其他需要用户信息的功能
|
||
|
||
### 3. 不需要登录的功能
|
||
以下功能游客也可以使用：
|
||
|
||
- 浏览首页
|
||
- 浏览预约页面
|
||
- 切换语言
|
||
- 查看联系我们
|
||
- 查看用户协议
|
||
- 查看隐私政策
|
||
- 查看关于我们
|
||
|
||
## 登录流程图
|
||
|
||
```
|
||
┌─────────────────────────────────────────────────┐
|
||
│ 应用启动 │
|
||
└─────────────────┬───────────────────────────────┘
|
||
│
|
||
▼
|
||
┌─────────────────────────────────────────────────┐
|
||
│ 进入首页（无需登录） │
|
||
│ - 显示轮播图 │
|
||
│ - 显示热门服务 │
|
||
│ - 显示关于我们 │
|
||
└─────────────────┬───────────────────────────────┘
|
||
│
|
||
▼
|
||
┌─────────────────────────────────────────────────┐
|
||
│ 用户点击服务项目 │
|
||
└─────────────────┬───────────────────────────────┘
|
||
│
|
||
▼
|
||
┌────────┴────────┐
|
||
│ 检查登录状态 │
|
||
└────────┬────────┘
|
||
│
|
||
┌─────────┴─────────┐
|
||
│ │
|
||
▼ ▼
|
||
┌────────┐ ┌────────┐
|
||
│ 已登录 │ │ 未登录 │
|
||
└───┬────┘ └───┬────┘
|
||
│ │
|
||
│ ▼
|
||
│ ┌─────────────────┐
|
||
│ │ 显示"请先登录" │
|
||
│ └────────┬────────┘
|
||
│ │
|
||
│ ▼
|
||
│ ┌─────────────────┐
|
||
│ │ 跳转到登录页 │
|
||
│ └────────┬────────┘
|
||
│ │
|
||
│ ▼
|
||
│ ┌─────────────────┐
|
||
│ │ 用户登录成功 │
|
||
│ └────────┬────────┘
|
||
│ │
|
||
└───────────────────┘
|
||
│
|
||
▼
|
||
┌────────────────┐
|
||
│ 进入详情页面 │
|
||
└────────────────┘
|
||
```
|
||
|
||
## 代码示例
|
||
|
||
### 1. 在页面中检查登录状态
|
||
|
||
```javascript
|
||
import { requireAuth } from '@/utils/auth.js'
|
||
|
||
export default {
|
||
methods: {
|
||
// 点击需要登录的功能
|
||
handleClick() {
|
||
// 检查登录状态，未登录则跳转
|
||
if (!requireAuth()) {
|
||
return // 未登录，已跳转到登录页
|
||
}
|
||
|
||
// 已登录，继续执行
|
||
this.doSomething()
|
||
}
|
||
}
|
||
}
|
||
```
|
||
|
||
### 2. 在页面加载时检查（可选）
|
||
|
||
```javascript
|
||
import { isLoggedIn, getCurrentUser } from '@/utils/auth.js'
|
||
|
||
export default {
|
||
data() {
|
||
return {
|
||
user: null,
|
||
isLogin: false
|
||
}
|
||
},
|
||
onLoad() {
|
||
// 检查登录状态（不跳转）
|
||
this.isLogin = isLoggedIn()
|
||
if (this.isLogin) {
|
||
this.user = getCurrentUser()
|
||
}
|
||
}
|
||
}
|
||
```
|
||
|
||
### 3. 条件渲染
|
||
|
||
```vue
|
||
<template>
|
||
<view>
|
||
<!-- 已登录显示 -->
|
||
<view v-if="isLogin">
|
||
<text>欢迎，{{ user.nickname }}</text>
|
||
</view>
|
||
|
||
<!-- 未登录显示 -->
|
||
<view v-else @click="goToLogin">
|
||
<text>点击登录</text>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
```
|
||
|
||
## 页面权限配置
|
||
|
||
### 公开页面（无需登录）
|
||
- `/pages/index/index` - 首页
|
||
- `/pages/appointment/appointment-page` - 预约页面
|
||
- `/pages/me/me-page` - 个人中心（可浏览，部分功能需登录）
|
||
- `/pages/login/login-page` - 登录页
|
||
- `/pages/me/contact-us-page` - 联系我们
|
||
|
||
### 需要登录的页面
|
||
- `/pages/index/reserve-details-page` - 服务详情
|
||
- `/pages/appointment/info-entry-page` - 预约信息填写
|
||
- `/pages/me/notification-page` - 通知列表
|
||
- `/pages/me/invite-reward-page` - 邀请奖励
|
||
|
||
## 登录状态管理
|
||
|
||
### 存储位置
|
||
1. **localStorage**
|
||
- `token` - 访问令牌
|
||
- `refreshToken` - 刷新令牌
|
||
- `user` - 用户信息（JSON 字符串）
|
||
|
||
2. **globalData**
|
||
- `app.globalData.token` - 访问令牌
|
||
- `app.globalData.user` - 用户信息对象
|
||
|
||
### 获取用户信息
|
||
|
||
```javascript
|
||
// 方法1：使用工具函数
|
||
import { getCurrentUser } from '@/utils/auth.js'
|
||
const user = getCurrentUser()
|
||
|
||
// 方法2：从 globalData 获取
|
||
const app = getApp()
|
||
const user = app.globalData.user
|
||
|
||
// 方法3：从 localStorage 获取
|
||
const userStr = uni.getStorageSync('user')
|
||
const user = userStr ? JSON.parse(userStr) : null
|
||
```
|
||
|
||
## 注意事项
|
||
|
||
1. **首页不自动检查登录**
|
||
- 允许游客浏览，提升用户体验
|
||
- 只在需要时才要求登录
|
||
|
||
2. **登录提示友好**
|
||
- 显示"请先登录"提示
|
||
- 1秒后自动跳转到登录页
|
||
|
||
3. **登录后返回**
|
||
- 登录成功后跳转到首页
|
||
- 用户可以继续之前的操作
|
||
|
||
4. **Token 验证**
|
||
- 在需要时才验证 token
|
||
- 避免频繁的网络请求
|
||
|
||
5. **退出登录**
|
||
- 清除所有认证数据
|
||
- 跳转到登录页
|
||
|
||
## 测试场景
|
||
|
||
### 场景1：游客浏览
|
||
1. 打开应用 → 进入首页 ✅
|
||
2. 浏览轮播图和服务 ✅
|
||
3. 切换到预约页面 ✅
|
||
4. 切换到个人中心 ✅
|
||
5. 切换语言 ✅
|
||
|
||
### 场景2：点击服务需要登录
|
||
1. 首页点击服务项目
|
||
2. 显示"请先登录"提示
|
||
3. 跳转到登录页
|
||
4. 登录成功后返回首页
|
||
|
||
### 场景3：个人中心功能
|
||
1. 点击"通知" → 要求登录
|
||
2. 点击"邀请奖励" → 要求登录
|
||
3. 点击"联系我们" → 无需登录 ✅
|
||
4. 点击"语言设置" → 无需登录 ✅
|
||
|
||
### 场景4：已登录用户
|
||
1. 打开应用 → 进入首页
|
||
2. 点击服务项目 → 直接进入详情页 ✅
|
||
3. 个人中心显示用户信息 ✅
|
||
4. 可以使用所有功能 ✅
|
||
|
||
## 相关文档
|
||
|
||
- [认证系统使用指南](./AUTH_GUIDE.md)
|
||
- [API 使用指南](./modules/api/API_GUIDE.md)
|
||
- [配置指南](./CONFIG_GUIDE.md)
|