修改页面

mock/token.ts

@@ -0,0 +1,10 @@
+import { defineMock } from "umi";
+
+export default defineMock({
+  "GET /api/token": (_, res) => {
+    res.send({
+      status: "ok",
+      data: 'token',
+    });
+  },
+});

src/components/Footer/index.tsx

@@ -1,9 +0,0 @@
-const Footer = () => {
-  return (
-    <div>
-      <p>This is umi Footer.</p>
-    </div>
-  );
-};
-
-export default Footer;

src/components/Header/index.less

@@ -0,0 +1,21 @@
+.header{
+  display: flex;
+  justify-content: space-between;
+  background: #001529;
+  color: #ffffff;
+  padding: 0 1vw;
+  .left{
+    display: inline-block;
+    margin: 0 10px;
+    font-size: 22px;
+    font-weight: bold;
+    font-family: cursive;
+  }
+  .right{
+    display: flex;
+    align-items: center;
+    .name{
+      padding: 0 5px 0 2px;
+    }
+  }
+}

src/components/Header/index.tsx

@@ -1,7 +1,29 @@
+import { useState } from 'react';
+import { Button } from 'antd';
+import type { SizeType } from 'antd/es/config-provider/SizeContext';
+import { UserOutlined } from '@ant-design/icons'
+import { clearSessionToken } from '@/utils/token';
+import { history  } from 'umi';
+import './index.less';
+interface userPorp{
+  name:string;
+}
 const Header = () => {
+  const user:userPorp = {name:'管理员'};
+  const [size] = useState<SizeType>('small');
+  // 退出登录
+  const toOut = (event: any) => {
+    clearSessionToken();
+    history.push('/login');
+  };
   return (
-    <div>
-      <p>This is umi Header.</p>
+    <div className='header'>
+      <div className='left'><p>茶餐厅-管理中心</p></div>
+      <div className='right'>
+         <UserOutlined />
+         <span className='name'>{user.name}</span> 
+         <Button onClick={toOut} size={size} type="primary" danger>退出登录</Button>
+      </div>
     </div>
   );
 };

src/components/index.less

@@ -1,12 +1,16 @@
 .main{
-  .center{
+  .top{
+      margin: 0 0 2px 0;
+  }
+  .down{
     display: flex;
     .left{
-      height: 800px;
+      height: 855px;
+      background: #001529;
     }
     .right{
       width: 100%;
-      padding: 1vw;
+      padding: 0 1vw;
     }
   }
 }

src/components/index.tsx

@@ -1,10 +1,9 @@
 import React, { useState } from 'react';
-import { Outlet,Link } from 'umi';
+import { Outlet, Link ,useLocation} from 'umi';
 import { HomeOutlined, UserOutlined, ShoppingOutlined } from '@ant-design/icons';
-import type { MenuProps } from 'antd';
+import type { MenuProps, MenuTheme } from 'antd';
 import { Menu } from 'antd';
 import Header from '@/components/Header';
-import Footer from '@/components/Footer';
 import './index.less';
 
 type MenuItem = Required<MenuProps>['items'][number];
@@ -26,25 +25,49 @@ function getItem(
 }
 
 const items: MenuItem[] = [
-  getItem((<Link to="/">系统首页</Link>), 'admin_1', <HomeOutlined />),
-  getItem('用户管理', 'admin_2', <UserOutlined />, 
+  getItem((<Link to="/">系统首页</Link>), '/', <HomeOutlined />),
+  getItem('用户管理', '/test1', <UserOutlined />, 
   [
-    getItem((<Link to="/user">普通用户</Link>), 'admin_2_1'),
-    getItem((<Link to="/admin">管理员</Link>), 'admin_2_2'),
+    getItem((<Link to="/user">普通用户</Link>), '/user', <UserOutlined />),
+    getItem((<Link to="/admin">管理员</Link>), '/admin', <UserOutlined />),
   ]),
-  getItem('产品管理', 'admin_3', <ShoppingOutlined />, 
+  getItem('产品管理', '/test2', <ShoppingOutlined />, 
   [
-    getItem((<Link to="/tea">茶产品</Link>), 'admin_3_1'),
-    getItem((<Link to="/fruit">水果茶产品</Link>), 'admin_3_2'),
-    getItem((<Link to="/products">茶副产品</Link>), 'admin_3_3'),
+    getItem((<Link to="/tea">茶产品</Link>), '/tea', <ShoppingOutlined />),
+    getItem((<Link to="/fruit">水果茶产品</Link>), '/fruit', <ShoppingOutlined />),
+    getItem((<Link to="/products">茶副产品</Link>), '/products', <ShoppingOutlined />),
   ]),
 ];
 
-// submenu keys of first level
-const rootSubmenuKeys = ['admin_1', 'admin_2', 'admin_3'];
+// 所有一级菜单
+const rootSubmenuKeys = ['/', '/test1', '/test2'];
 
 const App: React.FC = () => {
-  const [openKeys, setOpenKeys] = useState(['admin_1']);
+  // 处理刷新回到刷新前的页面
+  const location  = useLocation();
+  let one='';
+  let two='';
+  const list:any = items;
+  for (const val of list) {
+    if(val.key===location.pathname){
+      one=val.key
+      two=val.key
+      break
+    }else{
+      if(val.children){
+       for (const as of val.children) {
+        if(as.key===location.pathname) {
+          one=val.key
+          two=as.key
+          break
+        }
+       }
+      }
+    }
+  }
+  const defaultOpenKeys = [two];
+  const [openKeys, setOpenKeys] = useState([one]);    
+  const [theme] = useState<MenuTheme>('dark');
   const onOpenChange: MenuProps['onOpenChange'] = (keys) => {
     const latestOpenKey = keys.find((key) => openKeys.indexOf(key) === -1);
     if (rootSubmenuKeys.indexOf(latestOpenKey!) === -1) {
@@ -56,11 +79,12 @@ const App: React.FC = () => {
   return (
     <div className='main'>
       <div className='top'><Header /></div>
-      <div className='center'>
+      <div className='down'>
         <div className='left'>
           <Menu
             mode="inline"
-            defaultSelectedKeys={openKeys}
+            theme={theme}
+            defaultSelectedKeys={defaultOpenKeys}
             defaultOpenKeys={openKeys}
             openKeys={openKeys}
             onOpenChange={onOpenChange}
@@ -70,7 +94,6 @@ const App: React.FC = () => {
         </div>
         <div className='right'><Outlet /></div>
       </div>
-      <div className='down'><Footer /></div>
     </div>
   );
 };

src/pages/404.tsx

@@ -1,9 +1,19 @@
-const Index = () => {
-  return (
-    <div>
-      <p>404</p>
-    </div>
-  );
-};
+import { Link } from 'umi';
+import { Result, Button } from 'antd';
+
+export default () => (
+  <Result
+    status="404"
+    title="404"
+    style={{
+      background: 'none',
+    }}
+    subTitle="Sorry, the page you visited does not exist."
+    extra={
+      <Link to="/">
+        <Button type="primary">Back Home</Button>
+      </Link>
+    }
+  />
+);
 
-export default Index;

src/pages/login/index.less

@@ -0,0 +1,7 @@
+.login{
+  .w_1200{
+    width: 1200px;
+    margin: 0 auto;
+    text-align: center;
+  }
+}

src/pages/login/index.tsx

@@ -1,9 +1,61 @@
-const Poducts = () => {
-  return (
-    <div>
-      <p>This is umi Poducts.</p>
-    </div>
-  );
+import React from 'react';
+import axios from 'axios';
+import { Button, Form, Input } from 'antd';
+import { history  } from 'umi';
+import {  setSessionToken } from '@/utils/token';
+import './index.less'
+interface IProps {
+}
+const onFinish = (values: any) => {
+   console.log('Success:', values);
+   const response: any = axios.get('/api/token').then((res) => res.data.data);
+   const current = new Date();
+   const expireTime = current.setTime(current.getTime() + 1000 * 12 * 60 * 60);
+   setSessionToken(response.token, response.token, expireTime);
+   history.push('/');
+};
+
+const onFinishFailed = (errorInfo: any) => {
+  console.log('Failed:', errorInfo);
 };
+const Login: React.FC<IProps> = ((): JSX.Element => {
+
+  return <div  className='login'>
+    <div className='w_1200'>
+    <Form
+      name="basic"
+      labelCol={{ span: 7 }}
+      wrapperCol={{ span: 10 }}
+      style={{ maxWidth: 1200 }}
+      initialValues={{ remember: true }}
+      onFinish={onFinish}
+      onFinishFailed={onFinishFailed}
+      autoComplete="off"
+    >
+      <Form.Item
+        label="用户名"
+        name="username"
+        rules={[{ required: true, message: '请输入用户名!' }]}
+      >
+        <Input />
+      </Form.Item>
+
+      <Form.Item
+        label="密码"
+        name="password"
+        rules={[{ required: true, message: '请输入密码d!' }]}
+      >
+        <Input.Password />
+      </Form.Item>
+
+      <Form.Item wrapperCol={{ offset: 7, span: 10 }}>
+        <Button type="primary" htmlType="submit">
+          登录
+        </Button>
+      </Form.Item>
+      </Form>
+    </div>
+  </div>
+});
 
-export default Poducts;
+export default Login;

src/utils/token.ts

@@ -0,0 +1,36 @@
+export function setSessionToken (
+  access_token: string | undefined,
+  refresh_token: string | undefined,
+  expireTime: number,
+): void {
+  if (access_token) {
+    localStorage.setItem('access_token', access_token);
+  } else {
+    localStorage.removeItem('access_token');
+  }
+  if (refresh_token) {
+    localStorage.setItem('refresh_token', refresh_token);
+  } else {
+    localStorage.removeItem('refresh_token');
+  }
+  localStorage.setItem('expireTime', `${expireTime}`);
+}
+
+export function getAccessToken () {
+  return localStorage.getItem('access_token');
+}
+
+export function getRefreshToken () {
+  return localStorage.getItem('refresh_token');
+}
+
+export function getTokenExpireTime () {
+  return localStorage.getItem('expireTime');
+}
+
+export function clearSessionToken () {
+  sessionStorage.removeItem('user');
+  localStorage.removeItem('access_token');
+  localStorage.removeItem('refresh_token');
+  localStorage.removeItem('expireTime');
+}

src/wrappers/auth.tsx

@@ -3,14 +3,8 @@ import { Navigate, Outlet ,useLocation} from 'umi'
 export default (props:any) => {
   const location = useLocation();
   if (location.pathname != '/login') {
-    const token = localStorage.getItem('token');
-    if (token) {
-      return <Outlet />;
-    } else{
-      return <Outlet />;
-      return <Navigate to="/login" />;
-    }
-  }else{
-    return <Outlet />;
-  }
+    const expireTime = localStorage.getItem('expireTime');
+    if (expireTime) return <Outlet />;
+    else return <Navigate to="/login" />;
+  }else return <Outlet />;
 }