使用react+vite,从0到1搭建一个后台管理系统

132 阅读2分钟

初始化使用 create vite, 创建react工程化的项目。通过vite.config.js配置 proxy。 项目中的主要功能:注册,登录,基于身份的动态路由。路由访问权限,个人信息,表格渲染搜索等功能

注册:主要有表单验证,通过validate自定义验证函数,完成表单验证交互,验证通过发送注册请求 登录: 点击登录,表单验证,验证通过,发送登录请求,并将响应的token用户身份等字段,持久化存储到redux中,持久化存储使用的是redux-persist 插件 路由访问权限(验证有没有token): 我做了一个全局路由导航守卫,在Route注册路由时,通过render函数。验证是否有访问路由的权限,如果没有跳转到登录页面。有权限,就加载相应页面。 基于身份的动态路由:我使用的是react-router@5.x 他是没有路由表的,我的layout主页面中silder导航部分,使用的时 menu menu-item 组件构建的,根据menu需要的数据结构,构建了路由表结构,路由表中的信息有:地址、组件、是否有访问权限、导航内容、导航图标和能访问路由的身份字段。登录成功后,为了不修改数据源,首先将路由表递归深拷贝,然后再从redux中获取当前登录用户的身份信息,然后封装一个基于身份递归过滤注册路由表的函数。封装函数的作用:生成基于身份的路由表数组。将路由表数组绑定给menu组件,这样就可以实现根据身份动态生成导航栏。点击导航栏通过触发useHistory,执行push方法,完成修改url地址变化。在注册路由组件中,通过循环遍历数组方式,注册路由组件。这就是我实现基于身份实现动态路由方法。 其他权限:在二次封装axios的时候,在响应拦截器中拦截token无效和过期状态,然后跳转到登录页面 退出登录: 清除token 其他子模块:基本上常规渲染和数据增删改查的处理