React项目: 登录

15_React/day-8/code/my-app/src/index.css

@@ -17,4 +17,5 @@ code {
 #root {
   width: 100%;
   height: 100%;
+  position: relative;
 }

15_React/day-8/code/my-app/src/layout/index.jsx

@@ -16,8 +16,8 @@ import {
   DownOutlined,
 } from '@ant-design/icons';
 import { useSelector } from 'react-redux';
-import { useNavigate, Link } from 'react-router-dom';
-import { useState, createElement } from 'react';
+import { useNavigate, Link, redirect } from 'react-router-dom';
+import { useState, createElement, useEffect } from 'react';
 import defaultAvatar from '../logo.svg';
 
 const { Header, Sider, Content, Footer } = Layout;
@@ -34,6 +34,18 @@ export default function Index() {
     navigate(key);
   }
 
+  // 退出登录
+  function logout() {
+    localStorage.clear();
+    navigate('/login');
+  }
+
+  useEffect(() => {
+    // 获取用户信息
+    const token = localStorage.getItem('token');
+    if (!token) navigate('/login');
+  }, []);
+
   return (
     <Layout>
       <Sider
@@ -88,7 +100,7 @@ export default function Index() {
                     type: 'divider',
                   },
                   {
-                    label: '退出登录',
+                    label: <span onClick={logout}>退出登录</span>,
                     key: '3',
                   },
                 ],
@@ -97,7 +109,7 @@ export default function Index() {
             >
               <a onClick={(e) => e.preventDefault()}>
                 <Space>
-                  超级管理员
+                  {JSON.parse(localStorage.getItem('user') || '{}').nickname}
                   <DownOutlined />
                 </Space>
               </a>

15_React/day-8/code/my-app/src/pages/login.css

@@ -0,0 +1,18 @@
+.login {
+  box-sizing: border-box;
+  width: 400px;
+  border: 1px solid #d9d9d9;
+
+  border-radius: 4px;
+  padding: 20px 20px 0;
+
+  position: absolute;
+  left: 50%;
+  top: 50%;
+  transform: translateX(-50%) translateY(-50%);
+}
+
+.login h3 {
+  text-align: center;
+  margin-top: 0;
+}

15_React/day-8/code/my-app/src/pages/login.jsx

@@ -0,0 +1,76 @@
+import { Button, Form, Input } from 'antd';
+import { LockOutlined, UserOutlined } from '@ant-design/icons';
+import { useNavigate } from 'react-router-dom';
+
+import './login.css';
+
+export default function Login() {
+  const navigate = useNavigate();
+
+  const onFinish = (values) => {
+    // console.log('Success:', values);
+    // 登录时 将用户名和密码存入localStorage中，同时在存储一个自建的token值
+
+    console.log(values);
+    values.nickname = '超级管理员';
+
+    localStorage.setItem('user', JSON.stringify(values));
+    localStorage.setItem('token', 'guoguo123456');
+
+    navigate('/');
+  };
+
+  return (
+    <div className="login">
+      <h3>登入系统</h3>
+      <Form
+        name="normal_login"
+        className="login-form"
+        initialValues={{
+          remember: true,
+        }}
+        onFinish={onFinish}
+      >
+        <Form.Item
+          name="username"
+          rules={[
+            {
+              required: true,
+              message: '请输入账号!',
+            },
+          ]}
+        >
+          <Input
+            prefix={<UserOutlined className="site-form-item-icon" />}
+            placeholder="账号..."
+          />
+        </Form.Item>
+        <Form.Item
+          name="password"
+          rules={[
+            {
+              required: true,
+              message: '请输入密码!',
+            },
+          ]}
+        >
+          <Input.Password
+            prefix={<LockOutlined className="site-form-item-icon" />}
+            type="password"
+            placeholder="密码..."
+          />
+        </Form.Item>
+
+        <Form.Item style={{ textAlign: 'right' }}>
+          <Button
+            type="primary"
+            htmlType="submit"
+            className="login-form-button"
+          >
+            登录
+          </Button>
+        </Form.Item>
+      </Form>
+    </div>
+  );
+}

15_React/day-8/code/my-app/src/router/index.js

@@ -5,6 +5,7 @@ import { Suspense, lazy } from 'react';
 const Home = lazy(() => import('../pages/home'));
 const Setting = lazy(() => import('../pages/setting'));
 const ShopList = lazy(() => import('../pages/shop-list'));
+const Login = lazy(() => import('../pages/login'));
 
 const fallbackEle = '加载中...';
 const withSuspense = (ComP) => (
@@ -35,6 +36,10 @@ export const routes = [
       },
     ],
   },
+  {
+    path: '/login',
+    element: withSuspense(Login),
+  },
 ];
 
 const router = createBrowserRouter(routes);