React入门-使用 Vite 搭建基于 React 和 TypeScript 的后台管理应用（二）

项目结构调整与功能更新

目录规划

本章对项目的目录结构进行了精心规划，新增了 utils、views、routes 和 menus 四个目录，以实现更清晰的功能模块划分：

utils：用于存放各类工具类，为项目提供通用的功能支持。
views：专门存放业务页面，便于统一管理和维护。
routes：集中存放所有路由配置，使路由管理更加集中和高效。
menus：用于存放所有的菜单配置，方便对菜单进行统一调整和扩展。

功能更新

登录页面：本节学习中新增了一个登录页面，为系统的访问提供了入口和身份验证的基础。

工具类增强：在 utils 目录下的工具类中，新增了针对 sessionStorage 的操作工具。该工具主要用于辅助登录相关的操作，例如将登录信息记录在 sessionStorage 中。通过这种方式，系统可以在后续的页面访问中判断用户是否已经登录，从而实现对页面访问权限的初步控制。

typescript 复制代码

class SessionStorageUtil {
  /**
   * 设置 sessionStorage 项
   * @param key 键
   * @param value 值
   */
  static setItem(key: string, value: any): void {
    try {
      const serializedValue = JSON.stringify(value)
      sessionStorage.setItem(key, serializedValue)
    } catch (error) {
      console.error('Error setting sessionStorage item:', error)
    }
  }

  /**
   * 获取 sessionStorage 项
   * @param key 键
   * @returns 值
   */
  static getItem<T>(key: string): T | null {
    try {
      const serializedValue = sessionStorage.getItem(key)
      return serializedValue ? JSON.parse(serializedValue) : null
    } catch (error) {
      console.error('Error getting sessionStorage item:', error)
      return null
    }
  }

  /**
   * 删除 sessionStorage 项
   * @param key 键
   */
  static removeItem(key: string): void {
    try {
      sessionStorage.removeItem(key)
    } catch (error) {
      console.error('Error removing sessionStorage item:', error)
    }
  }

  /**
   * 清空所有 sessionStorage 项
   */
  static clear(): void {
    try {
      sessionStorage.clear()
    } catch (error) {
      console.error('Error clearing sessionStorage:', error)
    }
  }
}

export default SessionStorageUtil

菜单调整 ：对菜单进行了优化，使其支持多级菜单结构，提升了系统的功能组织和展示能力，能够更好地满足复杂业务场景下的菜单需求。

路由优化 ：为了提高路由配置的可读性和可维护性，将原本集中式的路由配置拆分为多个文件。在需要引入子模块的路由定义时，通过使用...符号，可以方便地将子路由合并到主路由中，使得路由管理更加灵活和高效。

待解决问题

当前存在一个安全性问题，即用户可以绕过登录页面直接访问其他页面。我已经意识到这个问题，并计划在后续的开发迭代中解决此问题，以进一步完善系统的安全性。

代码资源

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