feat(feature): Add Logout.

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 (
-    <div className={`py-[24px] rounded-[12px] border-[1px] border-[#c3c3c3] shadow-md ${className}`}>
+    <div className={`py-[24px] rounded-[12px] bg-[#fff] border-[1px] border-[#c3c3c3] shadow-md ${className}`}>
       {/* 头像 & 昵称 & 个签 */}
       <div className="flex flex-row items-center px-[27px]">
         <Avatar size={48} src={userInfo.avatar} />
@@ -68,7 +68,10 @@ export default function UserCard({ className }: Props) {
           <span>我的收藏</span>
           <Image width={24} height={24} src="/img/icon/love.svg" alt="我的收藏" />
         </li>
-        <li className="flex flex-row items-center w-[238px] h-[49px] px-[15px] rounded-[3px] text-[15px] leading-[21px] hover:bg-[#f2f3f7] cursor-pointer">
+        <li
+          className="flex flex-row items-center w-[238px] h-[49px] px-[15px] rounded-[3px] text-[15px] leading-[21px] hover:bg-[#f2f3f7] cursor-pointer"
+          onClick={userLogout}
+        >
           <span>退出登录</span>
         </li>
       </ul>

src/components/Header/index.tsx

@@ -74,7 +74,7 @@ export default function Header() {
         {/* 登录框 */}
         {showLogin && <LoginModal />}
         {/* 用户信息卡片 */}
-        {showUserCard && (
+        {Boolean(userInfo.id) && showUserCard && (
           <div
             className="absolute top-[70px] right-0"
             onMouseEnter={handleShowUserCard}

src/request/client/index.ts

@@ -1,17 +1,9 @@
 import { getAuthorization, getStringParams, handleResponse, hostMap, createFormBody } from '@/request/client/utils';
 import { IAuthType, IResponse } from '@/request/type';
 
-export const post = async <T>(
-  url: string,
-  data: any,
-  authType: IAuthType = 'default',
-  revalidate = 20,
-): Promise<IResponse<T>> => {
-  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 <T>(url: string, data: any, revalidate = 20): Promise<IResponse<T>> => {
+  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 <T>(
   return await handleResponse(response);
 };
 
-export const get = async <T>(
-  url: string,
-  data: any = null,
-  authType: IAuthType = 'noToken',
-  revalidate = 20,
-): Promise<IResponse<T>> => {
-  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 <T>(url: string, data: any = null, revalidate = 20): Promise<IResponse<T>> => {
+  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 <T>(
   return await handleResponse(response);
 };
 
-export const remove = async <T>(
-  url: string,
-  data: any = null,
-  authType: IAuthType = 'default',
-  revalidate = 20,
-): Promise<IResponse<T>> => {
-  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 <T>(url: string, data: any = null, revalidate = 20): Promise<IResponse<T>> => {
+  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 <T>(
 };
 
 export const uploadFile = async <T>(url: string, file: File): Promise<IResponse<T>> => {
-  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,

src/services/client/user.ts

@@ -16,7 +16,7 @@ export const apiSendSMS = async (params: {
   countryCode?: string;
   imageCheckCode?: string;
 }) => {
-  const result: FetchResponse<any> = await clientHttp.post('/queyueapi/user/user/sendsms', params);
+  const result: FetchResponse<string> = await clientHttp.post('/queyueapi/user/user/sendsms', params);
   return result;
 };
 
@@ -34,12 +34,6 @@ export const apiUserLogin = async (params: {
   deviceBrand?: string;
 }) => {
   const result: FetchResponse<string> = 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<string> = 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<UserInfo> = await clientHttp.get('/user/my/userInfo');
+  const res: FetchResponse<UserInfo> = await clientHttp.get('/queyueapi/user/my/userInfo');
   return res;
 };

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<boolean>;
+  /** 登出 */
+  userLogout: () => void;
+  /** 获取用户信息 */
   getUserInfo: () => Promise<boolean>;
 }
 
@@ -24,14 +32,7 @@ const useUserStore = create<UserState>()(
   devtools(
     persist(
       (set) => {
-        const getUserInfo = async () => {
-          const result = await apiGetMyUserInfo();
-          if (result.code === 200) await set(produce((state) => void (state.userInfo = result.data)));
-          return result.code === 200;
-        };
-
-        return {
-          userInfo: {
+        const initialUserInfo = {
           avatar: '',
           badgeList: [0],
           birthDay: '',
@@ -50,16 +51,21 @@ const useUserStore = create<UserState>()(
           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) setUserInfo(result.data);
+          return result.code === 200;
+        };
+
+        return {
+          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<UserState>()(
             });
             return await getUserInfo();
           },
+          userLogout: async () => {
+            await apiUserLogout();
+            setUserInfo(initialUserInfo);
+            destroyCookie(null, 'token');
+          },
+          getUserInfo,
         };
       },
       {