feat(用户中心): 新增用户中心相关功能模块
实现用户中心完整功能,包括: 1. 新增登录页面及登录逻辑 2. 添加个人资料、修改密码、关于我们等子页面 3. 实现头像上传功能 4. 添加js-cookie依赖处理token存储 5. 完善用户信息类型定义和API接口 6. 新增tabbar"我的"入口及相关路由配置 新增工具函数: 1. 添加auth.ts处理认证相关逻辑 2. 实现toast.ts统一消息提示 3. 添加uploadFile.ts处理文件上传 4. 新增isTableBar判断页面是否为tabbar页
This commit is contained in:
@@ -1,32 +1,99 @@
|
||||
import {
|
||||
login as _login,
|
||||
getUserInfo as _getUserInfo,
|
||||
wxLogin as _wxLogin,
|
||||
logout as _logout,
|
||||
} from '@/api/login'
|
||||
import { getToken, getTokenKey, removeToken, setToken } from '@/utils/auth'
|
||||
import { defineStore } from 'pinia'
|
||||
import { ref } from 'vue'
|
||||
import { toast } from '@/utils/toast'
|
||||
import { IUserInfoVo, IUserLogin } from '@/api/login.typings'
|
||||
|
||||
const initState = { nickname: '', avatar: '' }
|
||||
// 初始化状态
|
||||
const userInfoState: IUserInfoVo = {
|
||||
id: 0,
|
||||
username: '',
|
||||
name: '',
|
||||
sex: '',
|
||||
email: '',
|
||||
phone: '',
|
||||
avatar: '/static/images/avatar.jpg',
|
||||
createTime: '',
|
||||
roles: [],
|
||||
permissions: [],
|
||||
}
|
||||
|
||||
export const useUserStore = defineStore(
|
||||
'user',
|
||||
() => {
|
||||
const userInfo = ref<IUserInfo>({ ...initState })
|
||||
|
||||
const setUserInfo = (val: IUserInfo) => {
|
||||
// 定义用户信息
|
||||
const userInfo = ref<IUserInfoVo>({ ...userInfoState })
|
||||
// 设置用户信息
|
||||
const setUserInfo = (val: IUserInfoVo) => {
|
||||
console.log('设置用户信息', val)
|
||||
// 若头像为空 则使用默认头像
|
||||
if (!val.avatar) {
|
||||
val.avatar = userInfoState.avatar
|
||||
} else {
|
||||
val.avatar = 'https://oss.laf.run/ukw0y1-site/avatar.jpg?feige'
|
||||
}
|
||||
userInfo.value = val
|
||||
}
|
||||
|
||||
const clearUserInfo = () => {
|
||||
userInfo.value = { ...initState }
|
||||
// 删除用户信息
|
||||
const removeUserInfo = () => {
|
||||
userInfo.value = { ...userInfoState }
|
||||
removeToken()
|
||||
}
|
||||
// 一般没有reset需求,不需要的可以删除
|
||||
const reset = () => {
|
||||
userInfo.value = { ...initState }
|
||||
/**
|
||||
* 用户登录
|
||||
* @param credentials 登录参数
|
||||
* @returns R<IUserLogin>
|
||||
*/
|
||||
const login = async (credentials: {
|
||||
username: string
|
||||
password: string
|
||||
code: string
|
||||
uuid: string
|
||||
}) => {
|
||||
const res = await _login(credentials)
|
||||
console.log('登录信息', res)
|
||||
toast.success('登录成功')
|
||||
setToken(res.data.token)
|
||||
return res
|
||||
}
|
||||
/**
|
||||
* 获取用户信息
|
||||
*/
|
||||
const getUserInfo = async () => {
|
||||
const res = await _getUserInfo(getToken())
|
||||
setUserInfo(res.data)
|
||||
// TODO 这里可以增加获取用户路由的方法 根据用户的角色动态生成路由
|
||||
return res
|
||||
}
|
||||
/**
|
||||
* 退出登录 并 删除用户信息
|
||||
*/
|
||||
const logout = async () => {
|
||||
_logout()
|
||||
removeUserInfo()
|
||||
}
|
||||
/**
|
||||
* 微信登录
|
||||
* @param credentials 微信登录Code
|
||||
*/
|
||||
const wxLogin = async (credentials: { code: string }) => {
|
||||
const res = await _wxLogin(credentials)
|
||||
setToken(res.data.token)
|
||||
return res
|
||||
}
|
||||
const isLogined = computed(() => !!userInfo.value.token)
|
||||
|
||||
return {
|
||||
userInfo,
|
||||
setUserInfo,
|
||||
clearUserInfo,
|
||||
isLogined,
|
||||
reset,
|
||||
login,
|
||||
wxLogin,
|
||||
getUserInfo,
|
||||
logout,
|
||||
}
|
||||
},
|
||||
{
|
||||
|
||||
Reference in New Issue
Block a user