diff --git a/src/api/user/index.ts b/src/api/user/index.ts index 611f78e..00ef845 100644 --- a/src/api/user/index.ts +++ b/src/api/user/index.ts @@ -182,3 +182,16 @@ export const deleteFavorites = (data: any): any => { data: data, }); }; +/** + * 退出登录 + * @param userId + */ +export const logout = (userId: any): any => { + return web.request({ + url: "/auth/auth/user/logout", + method: "post", + params: { + userId: userId, + }, + }); +}; diff --git a/src/store/modules/user.ts b/src/store/modules/user.ts index e20e26b..a460ab9 100644 --- a/src/store/modules/user.ts +++ b/src/store/modules/user.ts @@ -7,23 +7,34 @@ import { handleLocalforage } from "@/utils/localforage"; export class useUserStore { token: string = ""; userId: string = ""; + name: string = ""; + avatar: string = ""; + nickname: string = ""; constructor() { makeObservable(this, { token: observable, userId: observable, + name: observable, + avatar: observable, setToken: action, setUserId: action, getToken: action, getUserId: action, isHydrated: action, + setName: action, + getName: action, + setAvatar: action, + getAvatar: action, + setNickName: action, + getNickName: action, }); makePersistable( this, { // 在构造函数内使用 makePersistable name: "userInfo", // 保存的name，用于在storage中的名称标识，只要不和storage中其他名称重复就可以 - properties: ["token", "userId"], // 要保存的字段，这些字段会被保存在name对应的storage中，注意：不写在这里面的字段将不会被保存，刷新页面也将丢失：get字段例外。get数据会在数据返回后再自动计算 + properties: ["token", "userId", "name", "avatar", "nickname"], // 要保存的字段，这些字段会被保存在name对应的storage中，注意：不写在这里面的字段将不会被保存，刷新页面也将丢失：get字段例外。get数据会在数据返回后再自动计算 storage: handleLocalforage, // 保存的位置：可以是localStorage，sessionstorage // removeOnExpiration: true, //如果 expireIn 具有值且已过期，则在调用 getItem 时将自动删除存储中的数据。默认值为 true。 // stringify: false, //如果为 true，则数据在传递给 setItem 之前将是 JSON.stringify。默认值为 true。 @@ -61,4 +72,22 @@ export class useUserStore { setUserId(userId: string) { this.userId = userId; } + setName(name: string) { + this.name = name; + } + setNickName(name: string) { + this.nickname = name; + } + getNickName() { + return this.nickname ? this.nickname : null; + } + setAvatar(avatar: string) { + this.avatar = avatar; + } + getName() { + return this.name ? this.name : null; + } + getAvatar() { + return this.avatar ? this.avatar : null; + } } diff --git a/src/views/Main/index.tsx b/src/views/Main/index.tsx index 1331ae0..6dfcfba 100644 --- a/src/views/Main/index.tsx +++ b/src/views/Main/index.tsx @@ -6,21 +6,21 @@ import { LogoutOutlined, QuestionCircleFilled, } from "@ant-design/icons"; -import { - DefaultFooter, - PageContainer, - ProCard, - ProLayout, -} from "@ant-design/pro-components"; -import { Link, Outlet, useLocation } from "react-router-dom"; +import { DefaultFooter, PageContainer, ProCard, ProLayout } from "@ant-design/pro-components"; +import { Link, Outlet, useLocation, useNavigate } from "react-router-dom"; import logo from "@/assets/images/logo.png"; import { Suspense } from "react"; import { Dropdown } from "antd"; import settings from "@/views/Main/settings.tsx"; -// import { getUserMenuPermission } from "@/api/user"; +import { logout } from "@/api/user"; +import { observer } from "mobx-react"; +import useStore from "@/utils/store/useStore.tsx"; +import { getUserMenuPermission } from "@/api/user"; -export default function Layout() { +const Layout = () => { const location = useLocation(); + const store = useStore("user"); + const navigate = useNavigate(); return (
{ - // const res: any = await getUserMenuPermission("17"); - // return res.data.routes; - // }, + request: async () => { + const res: any = await getUserMenuPermission(store.getUserId() as any); + return res.data.routes; + }, type: "group", defaultOpenAll: false, hideMenuWhenCollapsed: false, @@ -59,8 +59,8 @@ export default function Layout() { }} avatarProps={ { - src: "https://gw.alipayobjects.com/zos/antfincdn/efFD%24IOql2/weixintupian_20170331104822.jpg", - title: "七妮妮", + src: store.getAvatar() || logo, + title: store.getNickName() || store.getName() || "unknown", size: "large", // eslint-disable-next-line @typescript-eslint/ban-ts-comment // @ts-expect-error @@ -74,7 +74,8 @@ export default function Layout() { icon: , label: "退出登录", onClick: () => { - console.log("推出"); + logout(store.getUserId()); + navigate("/login"); }, }, ], @@ -130,4 +131,5 @@ export default function Layout() {
); -} +}; +export default observer(Layout); diff --git a/src/views/Main/settings.tsx b/src/views/Main/settings.tsx index c122968..f9b23b3 100644 --- a/src/views/Main/settings.tsx +++ b/src/views/Main/settings.tsx @@ -23,65 +23,65 @@ import qingyun from "@/assets/icons/qingyun.svg"; import ucloud from "@/assets/icons/ucloud.svg"; import jinshan from "@/assets/icons/jinshan.svg"; export default { - route: { - path: "/", - routes: [ - { - index: true, - path: "main/home", - name: "仪表盘", - icon: "https://pic.imgdb.cn/item/668b9176d9c307b7e99e51b9.png", - }, - { - path: "main/setting", - name: "存储商", - icon: "https://pic.imgdb.cn/item/668b918cd9c307b7e99e7fbc.png", - }, - { - path: "main/bucket", - name: "存储桶", - icon: "https://pic.imgdb.cn/item/668b91a5d9c307b7e99ea40d.png", - }, - { - path: "main/file", - name: "文件", - icon: "https://pic.imgdb.cn/item/668b91b7d9c307b7e99eb9fb.png", - }, - { - path: "main/share", - name: "分享圈", - icon: "https://pic.imgdb.cn/item/668b91d1d9c307b7e99edb1c.png", - }, - { - path: "/", - name: "个人中心", - icon: "https://pic.imgdb.cn/item/668b91e1d9c307b7e99eed3a.png", - routes: [ - { - index: true, - path: "main/user/info", - name: "用户信息", - icon: "https://pic.imgdb.cn/item/668b91fbd9c307b7e99f0f90.png", - }, - { - path: "main/user/setting", - name: "用户设置", - icon: "https://pic.imgdb.cn/item/668b921ad9c307b7e99f35b2.png", - }, - { - path: "main/user/myshare", - name: "我的分享", - icon: "https://pic.imgdb.cn/item/668f8e5fd9c307b7e9f079bf.png", - }, - { - path: "main/user/favorites", - name: "我的收藏", - icon: "https://pic.imgdb.cn/item/6690e7c0d9c307b7e9738f02.png", - }, - ], - }, - ], - }, + // route: { + // path: "/", + // routes: [ + // { + // index: true, + // path: "main/home", + // name: "仪表盘", + // icon: "https://pic.imgdb.cn/item/668b9176d9c307b7e99e51b9.png", + // }, + // { + // path: "main/setting", + // name: "存储商", + // icon: "https://pic.imgdb.cn/item/668b918cd9c307b7e99e7fbc.png", + // }, + // { + // path: "main/bucket", + // name: "存储桶", + // icon: "https://pic.imgdb.cn/item/668b91a5d9c307b7e99ea40d.png", + // }, + // { + // path: "main/file", + // name: "文件", + // icon: "https://pic.imgdb.cn/item/668b91b7d9c307b7e99eb9fb.png", + // }, + // { + // path: "main/share", + // name: "分享圈", + // icon: "https://pic.imgdb.cn/item/668b91d1d9c307b7e99edb1c.png", + // }, + // { + // path: "/", + // name: "个人中心", + // icon: "https://pic.imgdb.cn/item/668b91e1d9c307b7e99eed3a.png", + // routes: [ + // { + // index: true, + // path: "main/user/info", + // name: "用户信息", + // icon: "https://pic.imgdb.cn/item/668b91fbd9c307b7e99f0f90.png", + // }, + // { + // path: "main/user/setting", + // name: "用户设置", + // icon: "https://pic.imgdb.cn/item/668b921ad9c307b7e99f35b2.png", + // }, + // { + // path: "main/user/myshare", + // name: "我的分享", + // icon: "https://pic.imgdb.cn/item/668f8e5fd9c307b7e9f079bf.png", + // }, + // { + // path: "main/user/favorites", + // name: "我的收藏", + // icon: "https://pic.imgdb.cn/item/6690e7c0d9c307b7e9738f02.png", + // }, + // ], + // }, + // ], + // }, location: { pathname: "/main/home", }, diff --git a/src/views/User/Login/index.tsx b/src/views/User/Login/index.tsx index c27844f..46c7219 100644 --- a/src/views/User/Login/index.tsx +++ b/src/views/User/Login/index.tsx @@ -116,10 +116,13 @@ export default observer(() => { if (res && res.success && res.code === 0) { store.setToken(res.data.token); store.setUserId(res.data.user.id); + store.setName(res.data.user.userName); + store.setAvatar(res.data.user.avatar); + store.setNickName(res.data.user.nickName); setStorage("token", res.data.token, 24 * 60 * 30); if (store.getToken() !== null || store.getUserId() !== null) { setTimeout(() => { - navigate("/main"); + navigate("/main/home"); }, 3000); } message.open({