# 登录流程说明 ## 当前登录策略 ### 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 ``` ## 页面权限配置 ### 公开页面(无需登录) - `/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)