react + vite 模板项目

一个可以实现路由 keepAlive，具有类似浏览器访问页签功能的模板项目。

在线预览 | vercel online

模板下载使用

可以通过 npx 命令安装此项目

npx create-template-app my-app --template admin

一、权限管理

路由权限

1. 在src/config/access.ts中,同 umi 使用方式一致，配置对应权限对象。

import { InitialStateType } from "@/core/context/global";

export default function accessFactory(
  initialState: InitialStateType
): Record<string, boolean> {
  // const { accessInfo } = initialState

  return {
    canNav1: false,
  };
}

2. 在src/routes/index.tsx中,配置对应的 access key。

...

path: 'brandManage',
name: '品牌管理',
access: 'canNav1', // 对应的key
icon: <BoldOutlined />,
layout: {
	topItemRender: false
},

...

组件权限

在src/core/Access中：

1. Access组件：用于判断返回的 key，是否包含在后端的权限列表中，进而是否渲染传入的children

<Access access="enterprisePrivate-label-batchImport">
  <Button onClick={handleBatchImport}>批量导入</Button>
</Access>

2. useAccesshook：返回对应的 access key 是否包含在后端返回的权限列表中。

const noticeUpdateAuth = useAccess("notice-update");

二、keepAlive

注意：

1. 为了稳定起见 keepAlive 仅仅针对路由级别生效。
2. 默认不会开启 keepAlive
3. keepAlive 最多缓存的组件数，默认为 10 个，超过最大数量后会直接删除第一个缓存的组件。（可以在 core.ts 中配置 maxLength 来扩大缓存容积）

开启方法：

在路由配置中增加keepAlive：true选项。

{
	path: 'brandRule',
	name: '品牌规则',
	keepAlive: true, // 开启
	element: lazyLoad(lazy(() => import('@/pages/BrandManage/BrandRule')))
},

三、页签功能

默认开启页签功能，如果需要关闭此功能。在core.ts中配置isTab: false。

页签支持拖拽，刷新，关闭等操作。

四、环境变量使用

访问: getEnv()

在项目根目录下，配置了三种环境文件.env.development,.env.test,.env.production。分别对应本地、测试、生产三个环境。里面已经配置了相应的环境变量和gateway地址。

如需更多配置，直接增加对应的字段即可。为了更加友好的提示，增加对应字段后，在src/typings/vite-env.d.ts中加入新增字段的类型。

interface ImportMetaEnv {
  readonly VITE_NODE_ENV: "development" | "test" | "production";
  readonly VITE_PREFIX_URL: string;
}

五、接口请求

在src/core/service中封装了request和requestLegacy两个请求实例。分别针对gateway接口和之前走nginx代理的接口。

六、开发代理

在vite.config.ts中增加自定义代理即可。

...

server: {
	host: '127.0.0.1',
	port: 3000,
	open: true,
	proxy: {
		'/api': {
			target: proxyTarget.api,
			changeOrigin: true
		},
		'/user': {
			target: proxyTarget.nr,
			changeOrigin: true
		}
	}
}
...