初始化登录功能,注册功能
This commit is contained in:
1 parent
63726d8200
commit
76ba02d29b
16 files changed
+2090
-1025
No files matched your search
+163
-62
@@ -1,27 +1,77 @@
|
||||
// 引用pinia商店
|
||||
import { ref, reactive } from 'vue';
|
||||
import { ref, computed } from 'vue';
|
||||
import { defineStore } from 'pinia';
|
||||
import { parse, stringify } from 'zipson';
|
||||
|
||||
export const useUserStore = defineStore(
|
||||
'user',
|
||||
() => {
|
||||
const userInfo = ref({});
|
||||
const platform = ref('');
|
||||
const userToken = ref('');
|
||||
// 用户基础信息
|
||||
const userInfo = ref({
|
||||
areaCode: '',
|
||||
avatar: '',
|
||||
birthday: null,
|
||||
email: null,
|
||||
gender: null,
|
||||
mobile: '',
|
||||
nickName: '',
|
||||
trueName: null,
|
||||
userId: null,
|
||||
});
|
||||
|
||||
// 认证相关信息
|
||||
const token = ref('');
|
||||
const isLogin = ref(false);
|
||||
|
||||
// 平台配置信息
|
||||
const platform = ref('');
|
||||
const currency = ref('HKD');
|
||||
const lang = ref('');
|
||||
|
||||
// 客服联系方式
|
||||
const kfTelCN = ref('');
|
||||
const kfTelHK = ref('');
|
||||
const wxLink = ref('');
|
||||
const lang = ref('');
|
||||
const setProfile = (val) => {
|
||||
userInfo.value = {
|
||||
...val,
|
||||
};
|
||||
console.log(userInfo.value);
|
||||
|
||||
// 计算属性 - 是否已登录
|
||||
const isLoggedIn = computed(() => isLogin.value && token.value !== '');
|
||||
|
||||
// 计算属性 - 用户头像
|
||||
const userAvatar = computed(() => userInfo.value.avatar || '/static/default-avatar.png');
|
||||
|
||||
// 计算属性 - 用户昵称
|
||||
const userName = computed(() => userInfo.value.nickName || userInfo.value.trueName || '游客');
|
||||
|
||||
// 设置用户信息
|
||||
const setUserInfo = (data) => {
|
||||
if (data && typeof data === 'object') {
|
||||
userInfo.value = {
|
||||
...userInfo.value,
|
||||
...data,
|
||||
};
|
||||
}
|
||||
};
|
||||
//清理用户信息,退出时使用
|
||||
const clearProfile = () => {
|
||||
|
||||
// 设置认证令牌
|
||||
const setToken = (tokenValue) => {
|
||||
token.value = tokenValue || '';
|
||||
isLogin.value = !!tokenValue;
|
||||
};
|
||||
|
||||
// 设置登录状态
|
||||
const setLoginStatus = (status) => {
|
||||
isLogin.value = Boolean(status);
|
||||
};
|
||||
|
||||
// 用户登录 - 合并设置用户信息和令牌
|
||||
const login = (userData, accessToken) => {
|
||||
setUserInfo(userData);
|
||||
setToken(accessToken);
|
||||
setLoginStatus(true);
|
||||
};
|
||||
|
||||
// 用户登出 - 清理所有用户相关数据
|
||||
const logout = () => {
|
||||
userInfo.value = {
|
||||
areaCode: '',
|
||||
avatar: '',
|
||||
@@ -33,80 +83,131 @@ export const useUserStore = defineStore(
|
||||
trueName: null,
|
||||
userId: null,
|
||||
};
|
||||
token.value = '';
|
||||
isLogin.value = false;
|
||||
};
|
||||
|
||||
// 更新用户特定字段
|
||||
const updateUserInfo = (field, value) => {
|
||||
if (userInfo.value.hasOwnProperty(field)) {
|
||||
userInfo.value[field] = value;
|
||||
}
|
||||
};
|
||||
|
||||
// 批量更新用户信息
|
||||
const batchUpdateUserInfo = (updates) => {
|
||||
if (updates && typeof updates === 'object') {
|
||||
Object.keys(updates).forEach(key => {
|
||||
if (userInfo.value.hasOwnProperty(key)) {
|
||||
userInfo.value[key] = updates[key];
|
||||
}
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
// 获取用户权限列表(如果有的话)
|
||||
const getUserPermissions = computed(() => {
|
||||
// 这里可以根据实际业务逻辑返回用户权限
|
||||
return userInfo.value.permissions || [];
|
||||
});
|
||||
|
||||
// 检查用户是否有特定权限
|
||||
const hasPermission = (permission) => {
|
||||
if (!isLoggedIn.value) return false;
|
||||
return getUserPermissions.value.includes(permission);
|
||||
};
|
||||
|
||||
return {
|
||||
isLogin,
|
||||
// 状态
|
||||
userInfo,
|
||||
userToken,
|
||||
token,
|
||||
isLogin,
|
||||
platform,
|
||||
currency,
|
||||
kfTelCN,
|
||||
kfTelHK,
|
||||
wxLink,
|
||||
lang,
|
||||
setProfile,
|
||||
clearProfile,
|
||||
|
||||
// 计算属性
|
||||
isLoggedIn,
|
||||
userAvatar,
|
||||
userName,
|
||||
getUserPermissions,
|
||||
|
||||
// 动作
|
||||
setUserInfo,
|
||||
setToken,
|
||||
setLoginStatus,
|
||||
login,
|
||||
logout,
|
||||
updateUserInfo,
|
||||
batchUpdateUserInfo,
|
||||
hasPermission,
|
||||
};
|
||||
},
|
||||
{
|
||||
persist: {
|
||||
key: 'user-store', // 自定义存储键名
|
||||
storage: {
|
||||
getItem(key) {
|
||||
return uni.getStorageSync(key);
|
||||
try {
|
||||
const storedData = uni.getStorageSync(key);
|
||||
return storedData;
|
||||
} catch (error) {
|
||||
console.error('读取用户存储数据失败:', error);
|
||||
return null;
|
||||
}
|
||||
},
|
||||
setItem(key, value) {
|
||||
uni.setStorageSync(key, value);
|
||||
try {
|
||||
uni.setStorageSync(key, value);
|
||||
} catch (error) {
|
||||
console.error('保存用户数据失败:', error);
|
||||
}
|
||||
},
|
||||
},
|
||||
serializer: {
|
||||
deserialize: parse,
|
||||
serialize: stringify,
|
||||
deserialize: (data) => {
|
||||
try {
|
||||
return parse(data);
|
||||
} catch (error) {
|
||||
console.error('反序列化用户数据失败:', error);
|
||||
return null;
|
||||
}
|
||||
},
|
||||
serialize: (data) => {
|
||||
try {
|
||||
return stringify(data);
|
||||
} catch (error) {
|
||||
console.error('序列化用户数据失败:', error);
|
||||
return '{}';
|
||||
}
|
||||
},
|
||||
},
|
||||
// 指定需要持久化的状态
|
||||
paths: ['userInfo', 'token', 'isLogin', 'platform', 'currency', 'kfTelCN', 'kfTelHK', 'wxLink', 'lang'],
|
||||
},
|
||||
}
|
||||
);
|
||||
|
||||
/*
|
||||
页面内使用pinia
|
||||
|
||||
1、引用你定义的store实例
|
||||
import { useUserStore } from '@/stores/user'
|
||||
使用示例:
|
||||
1. 在组件中导入
|
||||
import { useUserStore } from '@/store/user.js'
|
||||
|
||||
2、实例化useUserStore
|
||||
const user = useUserStore()
|
||||
|
||||
3、引入 storeToRefs 用于 给实例的属性创建refs,即响应式
|
||||
import { storeToRefs } from 'pinia'
|
||||
例如:const {count} = storeToRefs(user)
|
||||
count.value 此时为响应式
|
||||
|
||||
4、修改state 方式共两种 如下
|
||||
user.count++
|
||||
4-1、
|
||||
// 带自动补全 ✨
|
||||
user.$patch({ count: counter.count + 1 })
|
||||
$patch()可批量修改state的属性值
|
||||
例如:
|
||||
批量修改
|
||||
const pathState = () => {
|
||||
store.$patch({
|
||||
user: { name: 'ks', age: 20 },
|
||||
});
|
||||
};
|
||||
|
||||
其他操作state的方法如下:
|
||||
|
||||
替换State
|
||||
const replaceState = () => {
|
||||
store.$state.user = { age: 20, name: 'eee', sex: 'women' };
|
||||
};
|
||||
重置state的值
|
||||
const reset = () => {
|
||||
store.$reset();
|
||||
};
|
||||
|
||||
4-2、
|
||||
// 或使用 action 代替
|
||||
user.increment()
|
||||
|
||||
*/
|
||||
2. 使用方式
|
||||
const userStore = useUserStore();
|
||||
|
||||
// 获取计算属性
|
||||
const { isLoggedIn, userName } = storeToRefs(userStore);
|
||||
|
||||
// 调用动作
|
||||
userStore.login(userData, accessToken);
|
||||
userStore.logout();
|
||||
|
||||
// 检查权限
|
||||
if (userStore.hasPermission('admin')) {
|
||||
// 执行管理员操作
|
||||
}
|
||||
*/
|
||||
Reference in new issue
Block a user