Schisandra-Cloud-Storage/schisandra-cloud-storage-front-react
5
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat: update

Browse Source
This commit is contained in:
landaiqing
2024-07-23 10:17:28 +08:00
parent c218006dd9
commit 757f494f1f
5 changed files with 125 additions and 78 deletions
Download Patch File Download Diff File Expand all files Collapse all files

13
src/api/user/index.ts
View File

@@ -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,
},
});
};

31
src/store/modules/user.ts
View File

@@ -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;
}
}

36
src/views/Main/index.tsx
View File

@@ -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 (
<div
id="pro-layout"
@@ -44,10 +44,10 @@ export default function Layout() {
}}
{...settings}
menu={{
// request: async () => {
// 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: <LogoutOutlined />,
label: "退出登录",
onClick: () => {
console.log("推出");
logout(store.getUserId());
navigate("/login");
},
},
],
@@ -130,4 +131,5 @@ export default function Layout() {
</ProLayout>
</div>
);
}
};
export default observer(Layout);

118
src/views/Main/settings.tsx
View File

@@ -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",
},

5
src/views/User/Login/index.tsx
View File

@@ -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({