CRMEB_Uniapp/docs/GUEST_MODE_PERMISSIONS.md

游客模式权限控制文档

概述

本应用实现了简化的游客模式权限控制，仅针对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 - 权限测试页面

权限检查流程

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

权限拦截器

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)

// 加入购物车
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)

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

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

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

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 函数

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

注意事项

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