vben admin 配置路由白名单

暂时需要配置一个白名单静态路由，步骤如下：

1、src/router/routes/index.ts 内定义路由

export const RegionRoute: AppRouteRecordRaw = {
  path: '/region',
  name: 'Region',
  component: () => import('@/views/system/region/index.vue'),
  meta: {
    title: '地区',
  },
};

export const basicRoutes = [
  RegionRoute,
];

2、src/enums/pageEnum.ts内添加路由配置

export enum PageEnum {
 
  BASE_REGION = '/region',
 
}

3、src/router/guard/permissionGuard.ts内配置白名单

import { PageEnum } from '@/enums/pageEnum';

const REGION_PATH = PageEnum.BASE_REGION;

const whiteList: PageEnum[] = [REGION_PATH];

if (whiteList.includes(to.path as PageEnum)) {
      if (to.path === REGION_PATH) next();
}

// 可以写简洁点

4、在src/router/index.ts内引入并暴露，这一步vben已经做好处理，我这边是不用改动

import type { RouteRecordRaw } from 'vue-router';
import type { App } from 'vue';

import { createRouter, createWebHashHistory } from 'vue-router';
import { basicRoutes } from './routes';

// 白名单应该包含基本静态路由
const WHITE_NAME_LIST: string[] = [];
const getRouteNames = (array: any[]) =>
  array.forEach((item) => {
    WHITE_NAME_LIST.push(item.name);
    getRouteNames(item.children || []);
  });
getRouteNames(basicRoutes);

// app router
// 创建一个可以被 Vue 应用程序使用的路由实例
export const router = createRouter({
  // 创建一个 hash 历史记录。
  history: createWebHashHistory(import.meta.env.VITE_PUBLIC_PATH),
  // 应该添加到路由的初始路由列表。
  routes: basicRoutes as unknown as RouteRecordRaw[],
  // 是否应该禁止尾部斜杠。默认为假
  strict: true,
  scrollBehavior: () => ({ left: 0, top: 0 }),
});

// reset router
export function resetRouter() {
  router.getRoutes().forEach((route) => {
    const { name } = route;
    if (name && !WHITE_NAME_LIST.includes(name as string)) {
      router.hasRoute(name) && router.removeRoute(name);
    }
  });
}

// config router
// 配置路由器
export function setupRouter(app: App<Element>) {
  app.use(router);
}

最后，重新运行项目即可