hookehuyr

docs(auth): 完善认证上下文模块的代码注释和描述

添加详细的代码注释,解释认证上下文模块的功能和实现细节,包括用户状态管理、登录登出功能以及token过期检查等。同时更新文件描述,使其更清晰易懂。
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 }
......