docs(auth): 完善认证上下文模块的代码注释和描述
添加详细的代码注释,解释认证上下文模块的功能和实现细节,包括用户状态管理、登录登出功能以及token过期检查等。同时更新文件描述,使其更清晰易懂。
Showing
2 changed files
with
56 additions
and
15 deletions
| 1 | <!-- | 1 | <!-- |
| 2 | * @Date: 2025-03-20 19:53:12 | 2 | * @Date: 2025-03-20 19:53:12 |
| 3 | * @LastEditors: hookehuyr hookehuyr@gmail.com | 3 | * @LastEditors: hookehuyr hookehuyr@gmail.com |
| 4 | - * @LastEditTime: 2025-03-21 15:28:49 | 4 | + * @LastEditTime: 2025-03-24 01:04:46 |
| 5 | * @FilePath: /mlaj/src/App.vue | 5 | * @FilePath: /mlaj/src/App.vue |
| 6 | * @Description: 文件描述 | 6 | * @Description: 文件描述 |
| 7 | --> | 7 | --> |
| ... | @@ -18,7 +18,6 @@ import { wxJsAPI } from "@/api/wx/config"; | ... | @@ -18,7 +18,6 @@ import { wxJsAPI } from "@/api/wx/config"; |
| 18 | import { apiList } from "@/api/wx/jsApiList.js"; | 18 | import { apiList } from "@/api/wx/jsApiList.js"; |
| 19 | import { wxInfo, getUrlParams, stringifyQuery } from "@/utils/tools"; | 19 | import { wxInfo, getUrlParams, stringifyQuery } from "@/utils/tools"; |
| 20 | 20 | ||
| 21 | -// 提供认证和购物车上下文 | ||
| 22 | provideAuth(); | 21 | provideAuth(); |
| 23 | provideCart(); | 22 | provideCart(); |
| 24 | </script> | 23 | </script> | ... | ... |
| 1 | /* | 1 | /* |
| 2 | * @Date: 2025-03-20 21:11:31 | 2 | * @Date: 2025-03-20 21:11:31 |
| 3 | * @LastEditors: hookehuyr hookehuyr@gmail.com | 3 | * @LastEditors: hookehuyr hookehuyr@gmail.com |
| 4 | - * @LastEditTime: 2025-03-22 10:08:20 | 4 | + * @LastEditTime: 2025-03-24 01:10:13 |
| 5 | * @FilePath: /mlaj/src/contexts/auth.js | 5 | * @FilePath: /mlaj/src/contexts/auth.js |
| 6 | - * @Description: 文件描述 | 6 | + * @Description: 认证上下文管理模块,提供用户认证状态管理、登录登出功能 |
| 7 | */ | 7 | */ |
| 8 | + | ||
| 9 | +// 导入Vue的组合式API相关函数 | ||
| 8 | import { ref, provide, inject, onMounted } from 'vue' | 10 | import { ref, provide, inject, onMounted } from 'vue' |
| 9 | 11 | ||
| 10 | -// 创建认证上下文的key | 12 | +// 创建认证上下文的Symbol key,用于provide/inject依赖注入 |
| 13 | +// 使用Symbol确保key的唯一性,避免命名冲突 | ||
| 11 | const authKey = Symbol('auth') | 14 | const authKey = Symbol('auth') |
| 12 | 15 | ||
| 13 | /** | 16 | /** |
| 14 | * 提供认证功能的组合式函数 | 17 | * 提供认证功能的组合式函数 |
| 18 | + * 该函数创建并提供认证上下文,包含: | ||
| 19 | + * 1. 用户状态管理(currentUser) | ||
| 20 | + * 2. 加载状态管理(loading) | ||
| 21 | + * 3. 登录登出功能 | ||
| 22 | + * 4. Token过期检查 | ||
| 15 | */ | 23 | */ |
| 16 | export function provideAuth() { | 24 | export function provideAuth() { |
| 25 | + // 当前用户状态,初始为null表示未登录 | ||
| 17 | const currentUser = ref(null) | 26 | const currentUser = ref(null) |
| 27 | + // 加载状态标志,用于控制加载动画等UI展示 | ||
| 18 | const loading = ref(true) | 28 | const loading = ref(true) |
| 19 | 29 | ||
| 20 | - // 检查token是否过期(24小时) | 30 | + /** |
| 31 | + * 检查登录token是否过期 | ||
| 32 | + * @returns {boolean} true表示token有效,false表示token已过期 | ||
| 33 | + */ | ||
| 21 | const checkTokenExpiration = () => { | 34 | const checkTokenExpiration = () => { |
| 22 | const loginTimestamp = localStorage.getItem('loginTimestamp') | 35 | const loginTimestamp = localStorage.getItem('loginTimestamp') |
| 23 | if (loginTimestamp) { | 36 | if (loginTimestamp) { |
| 24 | const now = Date.now() | 37 | const now = Date.now() |
| 25 | const diff = now - parseInt(loginTimestamp) | 38 | const diff = now - parseInt(loginTimestamp) |
| 26 | - if (diff > 24 * 60 * 60 * 1000) { // 24小时 | 39 | + // 检查是否超过24小时(24 * 60 * 60 * 1000 毫秒) |
| 27 | - // 清理登录状态并返回false表示token已过期 | 40 | + if (diff > 24 * 60 * 60 * 1000) { |
| 41 | + // token过期,清理登录状态并返回false | ||
| 28 | logout() | 42 | logout() |
| 29 | return false | 43 | return false |
| 30 | } | 44 | } |
| ... | @@ -32,23 +46,35 @@ export function provideAuth() { | ... | @@ -32,23 +46,35 @@ export function provideAuth() { |
| 32 | return true | 46 | return true |
| 33 | } | 47 | } |
| 34 | 48 | ||
| 35 | - // 初始化时检查本地存储的用户信息 | 49 | + /** |
| 50 | + * 组件挂载时初始化用户状态 | ||
| 51 | + * 1. 从localStorage读取保存的用户信息 | ||
| 52 | + * 2. 检查token是否过期 | ||
| 53 | + * 3. 恢复用户状态或保持登出状态 | ||
| 54 | + */ | ||
| 36 | onMounted(() => { | 55 | onMounted(() => { |
| 37 | const savedUser = localStorage.getItem('currentUser') | 56 | const savedUser = localStorage.getItem('currentUser') |
| 38 | if (savedUser) { | 57 | if (savedUser) { |
| 39 | - // 只有在token未过期的情况下才恢复用户信息 | 58 | + // 检查token是否有效,有效则恢复用户状态 |
| 40 | if (checkTokenExpiration()) { | 59 | if (checkTokenExpiration()) { |
| 41 | currentUser.value = JSON.parse(savedUser) | 60 | currentUser.value = JSON.parse(savedUser) |
| 42 | } | 61 | } |
| 43 | } | 62 | } |
| 63 | + // 初始化完成,关闭加载状态 | ||
| 44 | loading.value = false | 64 | loading.value = false |
| 45 | }) | 65 | }) |
| 46 | 66 | ||
| 47 | - // 登录函数 | 67 | + /** |
| 68 | + * 用户登录函数 | ||
| 69 | + * @param {Object} userData - 用户数据对象,包含用户基本信息 | ||
| 70 | + * @returns {boolean} 登录是否成功 | ||
| 71 | + */ | ||
| 48 | const login = (userData) => { | 72 | const login = (userData) => { |
| 73 | + // 更新当前用户状态 | ||
| 49 | currentUser.value = userData | 74 | currentUser.value = userData |
| 50 | if (currentUser.value) { | 75 | if (currentUser.value) { |
| 51 | try { | 76 | try { |
| 77 | + // 持久化存储用户信息和登录时间戳 | ||
| 52 | localStorage.setItem('currentUser', JSON.stringify(userData)) | 78 | localStorage.setItem('currentUser', JSON.stringify(userData)) |
| 53 | localStorage.setItem('loginTimestamp', Date.now().toString()) | 79 | localStorage.setItem('loginTimestamp', Date.now().toString()) |
| 54 | } catch (error) { | 80 | } catch (error) { |
| ... | @@ -58,14 +84,26 @@ export function provideAuth() { | ... | @@ -58,14 +84,26 @@ export function provideAuth() { |
| 58 | return true | 84 | return true |
| 59 | } | 85 | } |
| 60 | 86 | ||
| 61 | - // 登出函数 | 87 | + /** |
| 88 | + * 用户登出函数 | ||
| 89 | + * 清理用户状态和本地存储的认证信息 | ||
| 90 | + */ | ||
| 62 | const logout = () => { | 91 | const logout = () => { |
| 92 | + // 清空当前用户状态 | ||
| 63 | currentUser.value = null | 93 | currentUser.value = null |
| 94 | + // 清理本地存储的用户信息和登录时间戳 | ||
| 64 | localStorage.removeItem('currentUser') | 95 | localStorage.removeItem('currentUser') |
| 65 | localStorage.removeItem('loginTimestamp') | 96 | localStorage.removeItem('loginTimestamp') |
| 66 | } | 97 | } |
| 67 | 98 | ||
| 68 | - // 提供认证上下文 | 99 | + /** |
| 100 | + * 提供认证上下文给子组件使用 | ||
| 101 | + * 包含: | ||
| 102 | + * - currentUser: 当前用户状态 | ||
| 103 | + * - loading: 加载状态 | ||
| 104 | + * - login: 登录函数 | ||
| 105 | + * - logout: 登出函数 | ||
| 106 | + */ | ||
| 69 | provide(authKey, { | 107 | provide(authKey, { |
| 70 | currentUser, | 108 | currentUser, |
| 71 | loading, | 109 | loading, |
| ... | @@ -73,6 +111,7 @@ export function provideAuth() { | ... | @@ -73,6 +111,7 @@ export function provideAuth() { |
| 73 | logout | 111 | logout |
| 74 | }) | 112 | }) |
| 75 | 113 | ||
| 114 | + // 返回认证相关的状态和方法,供组件直接使用 | ||
| 76 | return { | 115 | return { |
| 77 | currentUser, | 116 | currentUser, |
| 78 | loading, | 117 | loading, |
| ... | @@ -82,11 +121,14 @@ export function provideAuth() { | ... | @@ -82,11 +121,14 @@ export function provideAuth() { |
| 82 | } | 121 | } |
| 83 | 122 | ||
| 84 | /** | 123 | /** |
| 85 | - * 使用认证功能的组合式函数 | 124 | + * 在子组件中使用认证功能的组合式函数 |
| 86 | - * @returns {Object} 认证上下文值 | 125 | + * @returns {Object} 认证上下文对象,包含用户状态和认证方法 |
| 126 | + * @throws {Error} 如果在provideAuth范围外使用则抛出错误 | ||
| 87 | */ | 127 | */ |
| 88 | export function useAuth() { | 128 | export function useAuth() { |
| 129 | + // 注入认证上下文 | ||
| 89 | const auth = inject(authKey) | 130 | const auth = inject(authKey) |
| 131 | + // 确保在provideAuth的范围内使用 | ||
| 90 | if (!auth) { | 132 | if (!auth) { |
| 91 | throw new Error('useAuth 必须在 provideAuth 的范围内使用') | 133 | throw new Error('useAuth 必须在 provideAuth 的范围内使用') |
| 92 | } | 134 | } | ... | ... |
-
Please register or login to post a comment