From 729a28b9ef8b8020a57dc661473ae57578dcbb2b Mon Sep 17 00:00:00 2001 From: mackt <1033530438@qq.com> Date: Tue, 2 Apr 2024 23:46:49 +0800 Subject: [PATCH] feat(feature): Add Logout. --- src/components/Header/UserCard.tsx | 11 +++-- src/components/Header/index.tsx | 2 +- src/request/client/index.ts | 50 ++++++--------------- src/services/client/user.ts | 12 ++--- src/store/user.ts | 72 +++++++++++++++++------------- 5 files changed, 66 insertions(+), 81 deletions(-) diff --git a/src/components/Header/UserCard.tsx b/src/components/Header/UserCard.tsx index 43f112b..b65d7dd 100644 --- a/src/components/Header/UserCard.tsx +++ b/src/components/Header/UserCard.tsx @@ -16,10 +16,10 @@ interface TDataList { } export default function UserCard({ className }: Props) { - const { userInfo } = useUserStore( + const { userInfo, userLogout } = useUserStore( useShallow((state) => ({ userInfo: state.userInfo, - setShowLogin: state.setShowLogin, + userLogout: state.userLogout, })), ); @@ -40,7 +40,7 @@ export default function UserCard({ className }: Props) { }, [userInfo]); return ( -
+
{/* 头像 & 昵称 & 个签 */}
@@ -68,7 +68,10 @@ export default function UserCard({ className }: Props) { 我的收藏 我的收藏 -
  • +
  • 退出登录
    • diff --git a/src/components/Header/index.tsx b/src/components/Header/index.tsx index 2262f3f..740ef2f 100644 --- a/src/components/Header/index.tsx +++ b/src/components/Header/index.tsx @@ -74,7 +74,7 @@ export default function Header() { {/* 登录框 */} {showLogin && } {/* 用户信息卡片 */} - {showUserCard && ( + {Boolean(userInfo.id) && showUserCard && (
    ( - url: string, - data: any, - authType: IAuthType = 'default', - revalidate = 20, -): Promise> => { - const token = await getAuthorization(authType); - // const host = hostMap[authType]; - // const finallyUrl = `${host}${url}`; - const finallyUrl = `${url}`; - const response = await fetch(finallyUrl, { +export const post = async (url: string, data: any, revalidate = 20): Promise> => { + const token = await getAuthorization(); + const response = await fetch(url, { headers: { Authorization: token || '', 'Content-Type': 'application/x-www-form-urlencoded;charset=UTF-8', @@ -27,19 +19,11 @@ export const post = async ( return await handleResponse(response); }; -export const get = async ( - url: string, - data: any = null, - authType: IAuthType = 'noToken', - revalidate = 20, -): Promise> => { - const token = await getAuthorization(authType); - const host = hostMap[authType]; - const formatUrl = data ? `${url}?${getStringParams(data)}` : url; - const finallyUrl = `${host}${formatUrl}`; - const response = await fetch(finallyUrl, { +export const get = async (url: string, data: any = null, revalidate = 20): Promise> => { + const token = await getAuthorization(); + const response = await fetch(url, { headers: { - Authorization: token, + Authorization: token || '', }, method: 'GET', next: { @@ -49,19 +33,11 @@ export const get = async ( return await handleResponse(response); }; -export const remove = async ( - url: string, - data: any = null, - authType: IAuthType = 'default', - revalidate = 20, -): Promise> => { - const token = await getAuthorization(authType); - const host = hostMap[authType]; - const formatUrl = data ? `${url}?${getStringParams(data)}` : url; - const finallyUrl = `${host}${formatUrl}`; - const response = await fetch(finallyUrl, { +export const remove = async (url: string, data: any = null, revalidate = 20): Promise> => { + const token = await getAuthorization(); + const response = await fetch(url, { headers: { - Authorization: token, + Authorization: token || '', }, method: 'DELETE', next: { @@ -72,12 +48,12 @@ export const remove = async ( }; export const uploadFile = async (url: string, file: File): Promise> => { - const token = await getAuthorization('default'); + const token = await getAuthorization(); const formData = new FormData(); formData.append('file', file); const response = await fetch(url, { headers: { - authorization: token, + authorization: token || '', }, method: 'POST', body: formData, diff --git a/src/services/client/user.ts b/src/services/client/user.ts index c01da3c..a070ce4 100644 --- a/src/services/client/user.ts +++ b/src/services/client/user.ts @@ -16,7 +16,7 @@ export const apiSendSMS = async (params: { countryCode?: string; imageCheckCode?: string; }) => { - const result: FetchResponse = await clientHttp.post('/queyueapi/user/user/sendsms', params); + const result: FetchResponse = await clientHttp.post('/queyueapi/user/user/sendsms', params); return result; }; @@ -34,12 +34,6 @@ export const apiUserLogin = async (params: { deviceBrand?: string; }) => { const result: FetchResponse = await clientHttp.post('/queyueapi/user/user/appLogin', params); - if (result.code === 200) { - setCookie(null, 'token', result.data, { - maxAge: 7 * 24 * 60 * 60, - path: '/', - }); - } return result; }; @@ -55,7 +49,7 @@ export const apiAutoLogin = async (params: { deviceId: string; deviceBrand?: str * @description 退出登录 */ export const apiUserLogout = async () => { - const res = await request('/user/user/logout'); + const res: FetchResponse = await clientHttp.get('/queyueapi/user/user/logout'); return res; }; @@ -63,6 +57,6 @@ export const apiUserLogout = async () => { * @description 获取个人信息 */ export const apiGetMyUserInfo = async () => { - const res: FetchResponse = await clientHttp.get('/user/my/userInfo'); + const res: FetchResponse = await clientHttp.get('/queyueapi/user/my/userInfo'); return res; }; diff --git a/src/store/user.ts b/src/store/user.ts index c0992c9..1484ce8 100644 --- a/src/store/user.ts +++ b/src/store/user.ts @@ -1,9 +1,9 @@ import { produce } from 'immer'; -import { setCookie } from 'nookies'; +import { setCookie, destroyCookie } from 'nookies'; import { create } from 'zustand'; import { devtools, persist } from 'zustand/middleware'; -import { apiGetMyUserInfo, apiUserLogin } from '@/services'; +import { apiGetMyUserInfo, apiUserLogin, apiUserLogout } from '@/services'; interface TRequestLogin { mobile: string; @@ -12,11 +12,19 @@ interface TRequestLogin { } interface UserState { + /** 登录框显示状态 */ showLogin: boolean; + /** 用户信息 */ userInfo: UserInfo; + /** 调用出登录框 */ setShowLogin: (value: boolean) => void; + /** 更新用户信息 */ setUserInfo: (parmas: UserInfo) => void; + /** 用户登录 */ userLogin: (params: TRequestLogin) => Promise; + /** 登出 */ + userLogout: () => void; + /** 获取用户信息 */ getUserInfo: () => Promise; } @@ -24,42 +32,40 @@ const useUserStore = create()( devtools( persist( (set) => { + const initialUserInfo = { + avatar: '', + badgeList: [0], + birthDay: '', + commentReplyCount: 0, + contributorRole: '', + fansCount: 0, + followCount: 0, + haveNewMessage: false, + id: '', + ipLocation: '', + journalCount: 0, + mobile: '', + nickName: '', + relation: 0, + sex: 0, + signature: '', + songCount: 0, + thumbUpCount: 0, + }; + + const setUserInfo = (value: UserInfo) => set(produce((state) => void (state.userInfo = value))); + const getUserInfo = async () => { const result = await apiGetMyUserInfo(); - if (result.code === 200) await set(produce((state) => void (state.userInfo = result.data))); + if (result.code === 200) setUserInfo(result.data); return result.code === 200; }; return { - userInfo: { - avatar: '', - badgeList: [0], - birthDay: '', - commentReplyCount: 0, - contributorRole: '', - fansCount: 0, - followCount: 0, - haveNewMessage: false, - id: '', - ipLocation: '', - journalCount: 0, - mobile: '', - nickName: '', - relation: 0, - sex: 0, - signature: '', - songCount: 0, - thumbUpCount: 0, - }, - // 展示登录框 + userInfo: initialUserInfo, showLogin: false, - // 调用出登录框 setShowLogin: (value) => set({ showLogin: value }), - // 更新用户信息 - setUserInfo: (userInfo) => set({ userInfo }), - // 获取用户信息 - getUserInfo, - // 用户登录 + setUserInfo, userLogin: async (params) => { const result = await apiUserLogin(params); if (result.code !== 200) return false; @@ -69,6 +75,12 @@ const useUserStore = create()( }); return await getUserInfo(); }, + userLogout: async () => { + await apiUserLogout(); + setUserInfo(initialUserInfo); + destroyCookie(null, 'token'); + }, + getUserInfo, }; }, {