【react】工程项目中的通过自定义Hook进行路由设计以及路由鉴权

新建router.js文件

javascript 复制代码
import { createBrowserRouter,Navigate } from 'react-router-dom';
import Layout from '../components/Layout';
import NoAuthPage from '../components/NoAuthPage';
import Index from '../pages/index';
import Login from '../pages/login';
import Table from '../pages/table';
 
const router = createBrowserRouter([
  {
    path: '/',
    element: <Layout />,
    children: [
      // 添加默认重定向
      {
        path: '', // 空路径匹配根路径
        element: <Navigate to="/index" replace />, // 自动跳转到 /index
      },
      {
        path: 'index',
        element: <Index />,
      },
      {
        path: 'table',
        element: <Table/>,
      },
    ],
  },
  {
    path: '/login',
    element: <Login />,
  },
  {
    path: '/404',
    element: <NoAuthPage />,
  },
]);
 
export default router;

自定义hook,新建useAuth.js文件

javascript 复制代码
import { useNavigate, useLocation } from 'react-router-dom';
import { useEffect } from 'react';
 
// 模拟的鉴权函数
const isAuthenticated = () => {
    console.log('模拟的鉴权函数');
  // 这里可以替换为实际的鉴权逻辑,比如检查 token 或用户状态
  return localStorage.getItem('token') !== null;
};
 
// 自定义 Hook:useAuthRedirect
const useAuthRedirect = () => {
  const navigate = useNavigate();
  const location = useLocation();
 
  useEffect(() => {
    if (!isAuthenticated()) {
      // 如果当前路径是受保护的且用户未认证,则重定向到登录页面
      navigate('/login', { state: { from: location.pathname } });
    }
  }, [navigate, location]);
};
 
export default useAuthRedirect;

App.js文件

javascript 复制代码
import React from 'react'
import { RouterProvider } from 'react-router-dom';
import router from './router';


function App () {
    return <RouterProvider router={router}></RouterProvider>
}

export default App

Layout.jsx文件

javascript 复制代码
import React from 'react';
import { Layout } from 'antd';
import { Outlet } from 'react-router-dom';
import Menus from './Menu';
import useAuthRedirect from '../utils/useAuth';

const { Header, Content, Footer } = Layout;

const LayoutPage = () => {
  useAuthRedirect()
  return (
    <Layout>
      <Header>
        <Menus />
      </Header>
      <Content>
        <Outlet></Outlet>
      </Content>
      <Footer></Footer>
    </Layout>
  );
};
export default LayoutPage;
相关推荐
试图让你心动19 分钟前
原生input添加删除图标类似vue里面移入显示删除[jquery]
前端·vue.js·jquery
陈不知代码44 分钟前
uniapp创建vue3+ts+pinia+sass项目
前端·uni-app·sass
小王码农记1 小时前
sass中@mixin与 @include
前端·sass
陈琦鹏1 小时前
轻松管理 WebSocket 连接!easy-websocket-client
前端·vue.js·websocket
hui函数1 小时前
掌握JavaScript函数封装与作用域
前端·javascript
行板Andante2 小时前
前端设计中如何在鼠标悬浮时同步修改块内样式
前端
Carlos_sam2 小时前
Opnelayers:ol-wind之Field 类属性和方法详解
前端·javascript
小毛驴8502 小时前
创建 Vue 项目的 4 种主流方式
前端·javascript·vue.js
誰能久伴不乏3 小时前
Linux如何执行系统调用及高效执行系统调用:深入浅出的解析
java·服务器·前端
涔溪4 小时前
响应式前端设计:CSS 自适应布局与字体大小的最佳实践
前端·css