react-router

react/react高阶/React路由.md

@@ -28,3 +28,4 @@ export default router
 ### 6.Data Loading
 ### 7.API路由
 ### 8.懒加载
+### 9.登录路由守卫

react/react高阶/project3/src/components/Header.jsx

@@ -13,6 +13,9 @@ function Header() {
                 <li>
                     <NavLink className={handleActive} to="/my">我的</NavLink>
                 </li>
+                <li>
+                    <NavLink className={handleActive} to="/list">列表</NavLink>
+                </li>
             </ul>
         </>
     )

react/react高阶/project3/src/hooks/useWorker.js

@@ -0,0 +1,32 @@
+/**
+ * 自定义hook
+ * 1.必须以use开头
+ * 2.可以使用react库中的内置钩子
+ * 
+ * 
+ * 封装钩子：
+ * 1.在页面内容渲染前  需要判断当前页面是否是需要路由守卫 
+ * 2.设置不需要进行路由守卫的白名单
+ * 3.获取调用方法时 该页面的路径 
+ * 4.判断token是否存在
+ * 判断清空：
+ * a.如果路径在白名单内  不需要守卫
+ * b.如果路径存在token 不管在不在白名单 不需要守卫
+ * c.如果路径不在白名单内 token不存在需要守卫 需要守卫
+ * d.如果路径不在白名单内 但是有token 不需要
+ * 
+ */
+import { useEffect } from "react";
+import { useLocation, useNavigate } from "react-router-dom";
+const whiteList = ['/','login'];
+// 函数组件
+export function useWorker() {
+    let location = useLocation();
+    let go = useNavigate();
+    let token = localStorage.getItem("token");
+    useEffect(()=>{
+        if(!token && !whiteList.includes(location.pathname)) {
+            go(`/login?form=${location.pathname}`)
+        }
+    },[location])
+}

react/react高阶/project3/src/layout copy/index.jsx

@@ -1,12 +0,0 @@
-import Header from "../components/Header";
-import { Outlet } from "react-router-dom";
-function Layout() {
-    return (
-        <>
-            <Header/>
-            <Outlet/>
-        </>
-    )
-}
-
-export default Layout;

react/react高阶/project3/src/pages/Home.jsx

@@ -1,4 +1,7 @@
+
+import { useLocation } from "react-router-dom";
 function Home() {
+    console.log(useLocation(),'哈哈哈')
     return (
         <>
             <h1>首页</h1>

react/react高阶/project3/src/pages/List.jsx

@@ -0,0 +1,9 @@
+function List() {
+    return (
+        <>
+          <h1>列表</h1>
+        </>
+    )
+}
+
+export default List;

react/react高阶/project3/src/pages/Login.jsx

@@ -1,7 +1,31 @@
+import { useSearchParams, useNavigate } from "react-router-dom";
+import { useCallback } from "react";
 function Login() {
+    let [searchParams] = useSearchParams();
+    let navigate = useNavigate();
+    /**
+     * 进入内置页（需要守卫的） 判断用户是否登录
+     * 未登录进入登录页
+     * 登录页进行登录后 应该跳回进入登录的那个内置页
+     * 
+     * 
+     * form 字段 来自于守卫页  
+     * 所以分两种情况
+     * 第一种：从守卫页登录  跳回守卫页
+     * 第二种：直接登录 跳回首页
+     */
+    // function handleLogin() {
+    //     localStorage.setItem("token",'Best wishes to you');
+    //     navigate({pathname:searchParams.get("form")||'/'})
+    // }
+    const handleLogin = useCallback(()=>{
+            localStorage.setItem("token",'Best wishes to you');
+            navigate({pathname:searchParams.get("form")} )
+    },[])
     return (
         <>
             <h1>登录</h1>
+            <button onClick={handleLogin}>点击登录</button>
         </>
     )
 }

react/react高阶/project3/src/pages/My.css

@@ -0,0 +1,11 @@
+.btn {
+    position: fixed;
+    bottom: 0;
+    left: 0;
+    width: 100%;
+    height: 60px;
+    text-align: center;
+    line-height: 60px;
+    background-color: #000;
+    color: #087EA4;
+}

react/react高阶/project3/src/pages/My.jsx

@@ -1,7 +1,22 @@
+import { useWorker } from "../hooks/useWorker";
+import { useNavigate } from "react-router-dom";
+import './My.css';
 function My() {
+    /**
+     * 本地存储中 查询token字段是否存在
+     * 存在 则正常进入
+     * 不存在  弹出登录页
+     */
+    useWorker();
+    let navigate = useNavigate();
+    function handleOut() {
+        localStorage.removeItem("token");
+        navigate('/login');
+    }
     return (
         <>
             <h1>我的</h1>
+            <button className="btn" onClick={handleOut}>退出登录</button>
         </>
     )
 }

react/react高阶/project3/src/router/index.js

@@ -14,6 +14,7 @@ const Home = lazy(async () => {
   return import("../pages/Home.jsx");
 });
 const My = lazy(() => import("../pages/My.jsx"));
+const List = lazy(() => import("../pages/List.jsx"));
 
 // 封装懒加载高阶组件 实现页面懒加载
 function lazyLoad(Component) {
@@ -42,6 +43,14 @@ const routes = [
             </Suspense>
         ),
       },
+      {
+        path: "list",
+        element: (
+            <Suspense fallback={<h3>Loading....</h3>}>
+                <List/>
+            </Suspense>
+        ),
+      },
     ],
   },
   {