umi项目配置之项目构建时配置umirc.ts

对于 umi 中能使用的自定义配置,你可以使用项目根目录的 .umirc.ts 文件或者 config/config.ts,值得注意的是这两个文件功能一致,仅仅是存在目录不同,2 选 1 ,.umirc.ts 文件优先级较高

umi 的配置文件是一个正常的 node 模块,它在执行 umi 命令行的时候使用,并且不包含在浏览器端构建中。

按照官网项目默认使用的是.umirc.ts,如果想要使用自己的配置,那么在根目录创建config/config.ts,并且删除.umirc.ts,不然还会读取.umirc.ts。

首先是关于umirc.ts文件的配置 也就是项目构建时配置

import { defineConfig } from '@umijs/max';

export default defineConfig({
  antd: {},//antd配置
  access: {},//权限配置
  model: {},//数据流配置
  initialState: {},
  request: {},//请求配置
  layout: {//模板页配置
    title: '数据工厂',
  },
  routes: [//配置路由
    {
      path: '/',
      redirect: '/home',
    },
    {
      name: '数据源管理',
      path: '/home',
      routes: [
        {
          path: '/home',
          redirect: '/home/Index',
        },
        {
          name: '接口管理',
          path: '/home/Index',
          component: './Home',
        },
        {
          name: '数据库管理',
          path: '/home/dataBase',
          component: './DataBase',
        },
      ]
    },
    {
      name: '权限演示',
      path: '/access',
      hideInBreadcrumb: false,
      component: './Access',
    },
    {
      name: ' CRUD 示例',
      path: '/table',
      component: './Table',
    },
  ],
  npmClient: 'pnpm',
});

常用配置

要在非根目录下部署 umi 项目时,你可以使用 base 配置。

base 配置允许你为应用程序设置路由前缀。比如有路由 //users,设置 base 为 /foo/ 后就可通过 /foo//foo/users 访问到之前的路由。

browser history - 适用于支持 HTML5 history API 的现代浏览器

hash history - 适用于旧版浏览器,或者你想把 location 保存到 hash 部分,避免由于后端服务器不支持而报错

memory history - 把 history 保存在内存里,适合非浏览器环境,如 React Native 或测试时

插件配置,开启和使用插件需要在配置页面做插件配置

  • 4
    点赞
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Umi配置路由权限需要以下步骤: 1. 安装依赖 首先需要安装 `@umijs/plugin-access` 插件,该插件提供了路由权限控制的功能。 ```bash npm install @umijs/plugin-access --save-dev ``` 2. 配置插件 在 `.umirc.js` 或 `config/config.js` 文件中添加插件配置: ```js export default { plugins: [ ['@umijs/plugin-access', { access: 'src/access.js', }], ], }; ``` 3. 编写权限控制文件 在 `src` 目录下创建 `access.js` 文件,该文件用于定义路由权限控制规则。 ```js export default function access(initialState) { const { currentUser } = initialState || {}; return { canReadPage1: currentUser && currentUser.role === 'admin', canReadPage2: currentUser && currentUser.role === 'user', }; } ``` `access.js` 文件需要导出一个函数,并接受一个参数 `initialState`,该参数包含了当前用户的信息等状态。函数需要返回一个对象,对象中定义了每个路由的访问权限。 在上面的例子中,我们定义了两个权限:`canReadPage1` 和 `canReadPage2`,分别表示访问页面1和页面2的权限。如果用户拥有相应的权限,即 `currentUser.role` 等于 `admin` 或 `user`,则返回 `true`,否则返回 `false`。 4. 配置路由 在路由配置中使用 `access` 属性指定路由访问权限: ```js export default [ { path: '/page1', component: '@/pages/Page1', access: 'canReadPage1', }, { path: '/page2', component: '@/pages/Page2', access: 'canReadPage2', }, ]; ``` 在上面的例子中,我们将 `access` 属性分别指定为 `canReadPage1` 和 `canReadPage2`,表示只有当用户拥有对应的权限才能访问对应的路由。 以上就是在 Umi配置路由权限的步骤。通过上述配置,我们可以实现简单的路由权限控制。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值