开发过程中使用vben-admin框架后，出现其他系统通过iframe方式集成本项目时，路由url自动重定向到登录页面，用户必须登录之后才能使用。基于这个问题，研究vben admin的路由白名单配置。目前已实现，实现思路已全部记录在文档中，如果有类似问题的朋友可以下载解决，下载后有不懂的内容，也可以私信我。
### Vben Admin 白名单配置详解
#### 一、背景介绍
在开发过程中，当我们采用Vben Admin框架进行项目构建时，可能会遇到一种情况：当其他系统试图通过iframe的方式集成我们的项目时，发现项目的路由URL会自动重定向至登录页面。这意味着用户必须先完成登录流程才能正常使用该项目的功能。为了解决这一问题，我们需要对Vben Admin框架中的路由白名单进行合理的配置。
#### 二、白名单配置原理与目的
路由白名单是指无需经过身份验证即可直接访问的URL列表。通过设置路由白名单，我们可以让某些特定的页面或功能即使在未登录状态下也能正常访问，从而提高用户体验并确保不同系统的顺利集成。
#### 三、配置步骤详解
##### 1. 本地路由配置
需要在项目的本地路由配置中加入自己项目特有的路由。这一步骤是为了确保框架能够识别到项目的具体路由信息。
- **操作位置**：通常情况下，可以在`src/router/index.js`文件中找到项目的基础路由配置。
- **操作方法**：在该文件中定义新的路由规则，如：
```javascript
{
path: '/example',
name: 'Example',
component: () => import('@/views/example.vue'),
meta: { title: '示例页面', noNeedLogin: true }
},
```
##### 2. 添加路由配置至`pageEnum.ts`
接下来，在`src/enums/pageEnum.ts`文件中添加对应的路由配置信息。
- **操作位置**：找到`src/enums/pageEnum.ts`文件。
- **操作方法**：在文件中添加新的路由配置项，例如：
```typescript
export enum PageEnum {
// ...
EXAMPLE = '/example',
// ...
}
```
这里需要注意的是，需要将新增加的路由路径与前面定义的路由规则对应起来。
##### 3. 配置白名单
为了实现特定页面无需登录即可访问的需求，还需要在权限保护的代码中增加白名单配置。
- **操作位置**：定位到`src/router/guard/permissionGuard.ts`文件。
- **操作方法**：
- 在文件中添加白名单逻辑，如：
```typescript
const whiteList: string[] = ['/example'];
if (whiteList.includes(to.path)) {
next();
} else {
// 其他逻辑处理...
}
```
##### 4. 引入并暴露配置文件
最后一步是确保已经配置好的路由文件被正确地引入到项目中，并且可以被外部引用。
- **操作位置**：在`src/router/index.ts`文件中进行。
- **操作方法**：
- 引入刚刚配置的路由文件。
- 使用`createRouter`和`createWebHashHistory`创建路由实例，并将其暴露出去供项目使用。
#### 四、测试验证
完成上述配置后，需要对配置结果进行测试验证，确保白名单配置生效。
- **操作步骤**：
1. 重启项目。
2. 直接访问配置好的白名单URL（如`/example`）。
3. 检查是否能够直接跳转至目标页面而无需登录。
#### 五、安装与运行命令
为了方便项目的开发与部署，下面是一些常用的命令：
- **安装依赖**：`pnpm i`
- **启动项目**：`pnpm dev`
- **打包项目**：`pnpm build`
通过以上步骤，我们就可以实现Vben Admin框架中路由白名单的配置，解决其他系统通过iframe集成时的登录限制问题，进一步提升用户体验。
#### 六、注意事项
- 在实际操作过程中，需要根据项目的实际情况调整配置细节。
- 保持代码风格的一致性，确保代码的可读性和维护性。
- 对于复杂的应用场景，可能还需要考虑更多的安全因素，比如限流、防爬虫等措施。
- 如果遇到问题，可以通过官方文档或社区寻求帮助。
通过对Vben Admin框架中路由白名单的合理配置，不仅解决了iframe集成时的登录限制问题，还进一步提升了用户体验，确保了项目的稳定性和安全性。
