企业官网建设流程全解析

中国建设银行官网站e路护下载,张家港建网站费用,资兴网站建设,修改文案支持在线图片编辑构建一个健壮的前端路由系统#xff0c;不仅仅是把页面配置进去#xff0c;更要考虑层级结构、权限控制、用户体验#xff08;重定向#xff09;以及异常兜底#xff08;404#xff09;。 一、路由分类#xff08;层级结构#xff09; 1. 第一层#xff08;顶层#…构建一个健壮的前端路由系统不仅仅是把页面配置进去更要考虑层级结构、权限控制、用户体验重定向以及异常兜底404。一、路由分类层级结构1. 第一层顶层区分“无需登录页面”如登录页和“需登录业务页”如后台主界面示例配置{path:/login,component:LoginPage},2. 第二层业务层加载全局 Layout侧边栏、Header并进行权限校验示例配置{path:/,component:/widgets/MainLayout,routes:[{path:/,redirect:/dashboard},{path:/dashboard,component:DashboardPage,wrappers:[/wrappers/auth],},// 其他业务页面...]}路由守卫auth Wrapper实现import{Navigate,Outlet,useLocation}fromumi;import{isUserLoggedIn}from/shared/utils/auth;/** * 路由守卫第一道防线 * 拦截没有 Token 的用户并重定向到登录页传递 reasonno_auth */exportdefault(){constlocationuseLocation();constisLoginisUserLoggedIn();if(isLogin){returnOutlet/;}else{// 构造目标 URL// 1. redirect: 登录成功后要跳回的地方// 2. reasonno_auth: 告诉登录页这是因为没登录被拦截过来的constcurrentPathencodeURIComponent(location.pathnamelocation.search);consttargetUrl/login?redirect${currentPath}reasonno_auth;returnNavigate to{targetUrl}replace/;}};3. 第三层功能层具体的业务页面、重定向规则、内部 404示例配置{path:*,component:404},二、路由书写顺序路由匹配是“从上到下”的 (Order Matters)路由器会像 switch 语句一样从第一行开始找错误做法把 path: ‘/’ 放在 path: ‘/login’ 前面且没有加 exact后果所有页面都会匹配到 /导致登录页可能渲染不出来或者被 Layout 包裹三、权限校验使用 Umi Wrappers (高阶组件)配置方式在路由配置中添加wrappers: [/wrappers/auth]执行逻辑路由匹配到该层级时先执行 Wrapper。如果 Wrapper 判断未登录直接跳转主 Layout 连加载的机会都没有彻底杜绝空白或闪屏。