umi创建路由

在 Umi 中配置路由是项目开发的基础,Umi 支持约定式路由(零配置,推荐)和配置式路由(手动配置),以下是详细说明:

一、约定式路由(推荐)

Umi 会根据 src/pages 目录结构自动生成路由配置,无需手动编写,适合大多数场景。

1. 基本规则
  • src/pages 下的 .tsx .jsx .js .ts 文件会被视为路由页面。
  • 目录和文件名称对应路由路径,例如:
    • src/pages/index.tsx → 路由路径 /
    • src/pages/user.tsx → 路由路径 /user
    • src/pages/user/profile.tsx → 路由路径 /user/profile
    • src/pages/user/[id].tsx → 动态路由,路径 /user/:id(如 /user/123
2. 特殊文件 / 目录
  • _layout.tsx:目录级布局组件,会包裹当前目录下的所有页面,例如:

    plaintext

    src/pages/user/
      _layout.tsx  # 包裹 user 下的所有页面
      index.tsx  
### Umi.js 中实现路由鉴权的方式 在 Umi.js 框架中,为了确保安全性和用户体验的一致性,在所有页面的必经之路上设立权限认证是一个重要的设计原则[^1]。具体来说,可以通过自定义高阶组件或者利用框架特性来完成这一目标。 对于基于函数式的 React 组件而言,一种常见的做法是在 `src/app.js` 动态配置中加入条件判断逻辑,当检测到未登录状态时重定向至登录页;反之,则允许访问指定路径下的资源。这里给出一段简化版的代码片段用于演示: ```javascript import React from 'react'; import { Redirect } from 'umi'; const AuthRouter = (props) => { // 判断当前是否有用户信息存储于会话中作为是否已登录的标准 const isLogin = window.sessionStorage.getItem('user') ? true : false; return ( // 如果已经登录则正常展示子组件内容,否则强制跳转到登录界面 isLogin ? <>{props.children}</> : <Redirect to="/login" /> ); }; export default AuthRouter; ``` 为了让上述鉴权机制在整个应用范围内生效,还需要修改 `.umirc.ts` 或者对应的配置文件,添加全局包裹层以确保每次请求都会经过该中间件处理: ```typescript // .umirc.ts or config/config.ts export default { // ...其他配置项... wrappers: ['@/wrappers'], // 将鉴权功能注册为应用程序启动时加载的一部分 }; ``` 另外值得注意的是,除了直接控制特定 URL 的可见性外,还可以考虑更细粒度的安全策略——即只针对某些敏感操作实施保护措施而不影响公开区域的功能正常使用。这通常涉及到创建专门负责身份验证的服务端接口以及客户端 SDK 来协助完成整个流程的设计与开发工作。 最后一点补充说明,Umi 提供了一个名为 `global.ts` 的特殊入口文件,它会在项目编译期间自动被引入并执行其中定义的方法或语句。因此也可以选择在此处调用额外设置好的拦截器实例化方法使能相应的业务逻辑扩展能力[^5]: ```typescript // global.ts import './styles/global.less'; // 加载样式表等预置资源... // 初始化API请求前后的通用处理器链路 import Interceptors from './utils/interceptors'; Interceptors.init(); ``` #### 鉴权的具体应用场景可能包括但不限于以下几个方面: - 用户个人信息中心 (`/profile`) - 订单管理后台 (`/admin/orders`) - 数据统计看板 (`/dashboard/analytics`) 这些地方往往包含了较为私密的数据资料或是涉及到了商业运营的核心环节,所以有必要采取适当的技术手段加以防护以免造成不必要的损失风险。
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值