appointment_system/docs/guides/LOGIN_FLOW.md

登录流程说明

当前登录策略

1. 应用启动

• ✅ 直接进入首页，不检查登录状态
• ✅ 允许游客浏览首页内容
• ✅ 允许游客浏览预约页面（tabBar）

2. 需要登录的操作

以下操作会触发登录检查，未登录时会提示并跳转到登录页：

首页

• 点击服务项目进入详情页

预约页面

• 点击具体服务项目
• 提交预约表单

个人中心

• 查看通知
• 邀请奖励
• 查看预约记录
• 其他需要用户信息的功能

3. 不需要登录的功能

以下功能游客也可以使用：

• 浏览首页
• 浏览预约页面
• 切换语言
• 查看联系我们
• 查看用户协议
• 查看隐私政策
• 查看关于我们

登录流程图

┌─────────────────────────────────────────────────┐
│                  应用启动                        │
└─────────────────┬───────────────────────────────┘
                  │
                  ▼
┌─────────────────────────────────────────────────┐
│              进入首页（无需登录）                 │
│         - 显示轮播图                             │
│         - 显示热门服务                           │
│         - 显示关于我们                           │
└─────────────────┬───────────────────────────────┘
                  │
                  ▼
┌─────────────────────────────────────────────────┐
│            用户点击服务项目                       │
└─────────────────┬───────────────────────────────┘
                  │
                  ▼
         ┌────────┴────────┐
         │  检查登录状态    │
         └────────┬────────┘
                  │
        ┌─────────┴─────────┐
        │                   │
        ▼                   ▼
   ┌────────┐          ┌────────┐
   │ 已登录 │          │ 未登录 │
   └───┬────┘          └───┬────┘
       │                   │
       │                   ▼
       │          ┌─────────────────┐
       │          │ 显示"请先登录"   │
       │          └────────┬────────┘
       │                   │
       │                   ▼
       │          ┌─────────────────┐
       │          │  跳转到登录页    │
       │          └────────┬────────┘
       │                   │
       │                   ▼
       │          ┌─────────────────┐
       │          │  用户登录成功    │
       │          └────────┬────────┘
       │                   │
       └───────────────────┘
                  │
                  ▼
         ┌────────────────┐
         │  进入详情页面   │
         └────────────────┘

代码示例

1. 在页面中检查登录状态

import { requireAuth } from '@/utils/auth.js'

export default {
  methods: {
    // 点击需要登录的功能
    handleClick() {
      // 检查登录状态，未登录则跳转
      if (!requireAuth()) {
        return // 未登录，已跳转到登录页
      }
      
      // 已登录，继续执行
      this.doSomething()
    }
  }
}

2. 在页面加载时检查（可选）

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. 条件渲染

<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 - 用户信息对象

获取用户信息

// 方法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. 可以使用所有功能 ✅

相关文档

• 认证系统使用指南
• API 使用指南
• 配置指南