React入门（四）-全局路由以及mock数据模块化

全局路由以及mock数据模块化

本次优化主要围绕功能增强、代码模块化以及项目结构优化展开，具体如下：

1. React路由保护机制优化

为防止用户绕过登录页面直接访问受保护路由，我们在AppContent方法中引入了全局路由监听机制。

通过useEffect钩子监听路由变化，结合sessionStorage检查用户登录状态，确保未登录用户无法访问非登录页面。
代码实现：

javascript 复制代码

// 使用 useEffect 监听路由变化
useEffect(() => {
  const isLoggedIn = !!SessionStorageUtil.getItem('user');
  if (!isLoggedIn && !['/login', '/'].includes(location.pathname)) {
    navigate('/login', { replace: true });
  }
}, [location, navigate]);

优化效果：

实现全局路由保护，提升应用安全性。
避免用户通过直接访问URL绕过登录逻辑。

2. Mock服务模块化重构

为提升代码复用性与可维护性，我们将mockServer.js中的模拟数据请求逻辑提取为独立模块common.js。
重构后代码：

javascript 复制代码

import Mock from 'mockjs';

export default function mockCommon(app) {
  // 模拟登录接口
  app.post('/api/login', (req, res) => {
    const { username, password } = req.body;
    if (username === 'admin' && password === '123456') {
      res.json({ success: true, message: '登录成功！', data: { token: 'mock-token' } });
    } else {
      res.status(401).json({ success: false, message: '用户名或密码错误！' });
    }
  });

  // 模拟数据接口
  app.get('/api/data', (req, res) => {
    res.json({
      success: true,
      data: Mock.mock({ 'list|5': ['@id'] }),
    });
  });
}

调用方式：

javascript 复制代码

import express from 'express';
import mockCommon from './common';

const app = express();
app.use(express.json());
mockCommon(app); // 注册模拟接口
app.listen(5000, () => console.log('Mock server is running on http://localhost:5000'));

优化效果：

提升代码模块化程度，便于后续扩展与维护。
通过集中管理Mock逻辑，减少重复代码。

3. 项目结构优化

为提升项目可读性与扩展性，我们将相关组件与页面统一迁移至view目录下，具体包括：

About.tsx
Dashboard.tsx
Home.tsx

优化效果：

优化项目结构，便于后续功能扩展。
提升代码组织性，便于团队协作。

总结

本次优化从功能安全、代码模块化以及项目结构三个方面入手，显著提升了项目的可维护性与扩展性。后续将继续探索更多优化方向，欢迎大家交流讨论！

项目完整代码托管于 Gitee，地址为：gitee.com/animal-fox_...