# 游客模式权限控制文档

## 概述

本应用实现了简化的游客模式权限控制，仅针对4个关键动作进行登录拦截，其他功能游客可正常使用。

## 权限控制规则

### ✅ 游客可正常使用的功能
- 浏览首页商品
- 查看商品详情
- 搜索商品
- 浏览社区内容
- 购物车页面（可正常访问）
- 首页（无登录提示）
- 其他所有功能

### ❌ 需要登录的4个动作

1. **商品详情页-加入购物车按钮**
   - 触发条件：点击"加入购物车"按钮
   - 权限检查：`PROTECTED_ACTIONS.ADD_TO_CART`
   - 提示信息："加入购物车需要先登录"

2. **商品详情页-立即购买按钮**
   - 触发条件：点击"立即购买"按钮
   - 权限检查：`PROTECTED_ACTIONS.BUY_NOW`
   - 提示信息："立即购买需要先登录"

3. **点击"我的"tab**
   - 触发条件：点击底部导航栏的"我的"按钮
   - 权限检查：`PROTECTED_ACTIONS.VIEW_MY_PAGE`
   - 提示信息："访问'我的'页面需要先登录"

4. **点击"乐购"tab**
   - 触发条件：点击底部导航栏的"乐购"按钮
   - 权限检查：`PROTECTED_ACTIONS.VIEW_LEGOU`
   - 提示信息："访问'乐购'页面需要先登录"

## 技术实现

### 核心文件

1. **`utils/auth.js`** - 权限控制核心逻辑（仅4个动作）
2. **`pages/product/detail.vue`** - 商品详情页权限检查
3. **`pages/user/index.vue`** - 我的页面权限检查
4. **`pages/legou/index.vue`** - 乐购页面权限检查
5. **`pages/test/auth-test.vue`** - 权限测试页面

### 权限检查流程

```javascript
// 1. 检查登录状态
if (isLoggedIn()) {
    // 已登录，执行操作
    callback()
} else {
    // 未登录，显示提示并跳转登录
    showLoginModal()
}
```

### 权限拦截器

```javascript
export function requireAuth(callback, options = {}) {
    if (isLoggedIn()) {
        // 已登录，执行回调
        if (typeof callback === 'function') {
            callback()
        }
        return true
    } else {
        // 未登录，显示提示并跳转登录
        const message = options.message || actionMessages[options.action]
        showLoginModal(message, options.returnUrl)
        return false
    }
}
```

## 页面权限检查实现

### 商品详情页 (`pages/product/detail.vue`)

```javascript
// 加入购物车
addToCart() {
    requireAuth(() => {
        // 执行加入购物车逻辑
        console.log('🛒 加入购物车:', this.productId)
    }, {
        action: PROTECTED_ACTIONS.ADD_TO_CART,
        returnUrl: `/pages/product/detail?id=${this.productId}`
    })
},

// 立即购买
buyNow() {
    requireAuth(() => {
        // 执行立即购买逻辑
        console.log('🛒 立即购买:', this.productId)
    }, {
        action: PROTECTED_ACTIONS.BUY_NOW,
        returnUrl: `/pages/product/detail?id=${this.productId}`
    })
}
```

### 我的页面 (`pages/user/index.vue`)

```javascript
onShow() {
    this.checkLoginStatus()
    // 无论是否登录都进行权限检查，确保游客模式下能正确触发登录
    this.checkAuthAccess()
    this.updateTabBar()
},

checkAuthAccess() {
    requireAuth(() => {
        console.log('用户已登录，可以访问个人中心')
        this.checkLoginStatus()
    }, {
        action: PROTECTED_ACTIONS.VIEW_MY_PAGE,
        message: '访问个人中心需要先登录'
    })
}
```

### 乐购页面 (`pages/legou/index.vue`)

```javascript
onShow() {
    // 乐购页面需要登录权限，无论是否登录都进行权限检查
    this.checkAuthAccess()
    this.updateTabBar()
},

checkAuthAccess() {
    requireAuth(() => {
        console.log('用户已登录，可以访问乐购')
    }, {
        action: PROTECTED_ACTIONS.VIEW_LEGOU,
        message: '访问乐购页面需要先登录'
    })
}
```

## 测试方法

### 使用权限测试页面

访问 `/pages/test/auth-test` 页面可以测试所有权限控制功能：

1. **测试加入购物车** - 模拟商品详情页的加入购物车操作
2. **测试立即购买** - 模拟商品详情页的立即购买操作
3. **测试我的页面** - 模拟点击"我的"tab的操作
4. **测试乐购页面** - 模拟点击"乐购"tab的操作

### 测试步骤

1. 确保处于游客模式（未登录状态）
2. 点击任意测试按钮
3. 验证是否弹出登录提示
4. 点击"去登录"验证跳转
5. 登录成功后返回测试页面
6. 再次点击测试按钮验证权限通过

## 用户体验

### 游客模式体验
- 可以正常使用大部分功能
- 可以浏览商品、查看详情、搜索等
- 点击4个受限动作时，会弹出友好的登录提示
- 提供便捷的登录入口

### 登录后体验
- 所有功能正常使用
- 登录状态持久化
- 支持退出登录

## 注意事项

1. **权限检查时机**：在页面 `onShow` 生命周期中进行权限检查
2. **返回地址**：登录成功后会返回到触发登录的页面
3. **状态同步**：登录状态变更后需要及时更新页面状态
4. **错误处理**：权限检查失败时提供友好的错误提示

## 扩展说明

如需添加新的权限控制点，只需：

1. 在 `PROTECTED_ACTIONS` 中添加新的action类型
2. 在 `actionMessages` 中添加对应的提示信息
3. 在相应页面调用 `requireAuth` 函数

```javascript
// 添加新的权限控制点
requireAuth(() => {
    // 执行需要登录的操作
}, {
    action: PROTECTED_ACTIONS.NEW_ACTION,
    returnUrl: '/pages/current/page'
})
```

## 注意事项

- 当前仅保留4个核心动作的权限控制
- 其他功能游客可正常使用，无需登录
- 权限检查仅在特定动作触发时进行
- 页面访问不再进行权限拦截
- 社区和购物车页面游客可正常访问，不会提示登录
- 首页不再显示登录提示，游客可直接使用