# Что означает: interface GenerateMenuAndRoutesOptions { fetchMenuListAsync?: () => ...

```ts
interface GenerateMenuAndRoutesOptions {
  fetchMenuListAsync?: () => Promise<RouteRecordStringComponent[]>;
  forbiddenComponent?: RouteRecordRaw['component'];
  layoutMap?: ComponentRecordType;
  pageMap?: ComponentRecordType;
  roles?: string[];
  router: Router;
  routes: RouteRecordRaw[];
}
```

Это **TypeScript-интерфейс**, который описывает **объект с настройками** для функции (скорее всего `generateAccessible`).  
Разберём **что означает КАЖДАЯ строка и зачем это нужно** 👇

---

## Общий смысл

```ts
interface GenerateMenuAndRoutesOptions { ... }

```

👉 Это **контракт**:

- какие поля **можно / нужно** передать
- какие из них **обязательные**
- какие **опциональные**
- каких **типов** они должны быть

---

## Разбор по полям

---

### 🔹 `fetchMenuListAsync?: () => Promise<RouteRecordStringComponent[]>;`

- `?` → **необязательное**
- тип → **функция**
- без аргументов
- возвращает **Promise**
- Promise резолвится в массив `RouteRecordStringComponent`

📌 То есть:

```ts
fetchMenuListAsync: async () => {
  return getAllMenusApi()
}

```

👉 **callback**, который:

- асинхронно получает меню / маршруты
- обычно с бэкенда

---

### 🔹 `forbiddenComponent?: RouteRecordRaw['component'];`

Это:

> «возьми тип поля `component` из `RouteRecordRaw`»

Фактически:

```ts
Component | (() => Promise<Component>)

```

Используется как:

- компонент **403 / Forbidden**
- или fallback при отсутствии прав

---

### 🔹 `layoutMap?: ComponentRecordType;`

Карта layout-компонентов:

```ts
{
  BasicLayout: BasicLayout,
  IFrameView: IFrameView,
}

```

Используется, чтобы:

- сопоставлять строку `"BasicLayout"`
- с реальным Vue-компонентом

---

### 🔹 `pageMap?: ComponentRecordType;`

Карта страниц:

```ts
import.meta.glob('../views/**/*.vue')

```

Используется, чтобы:

- по строке `"Users"`
- найти компонент `Users.vue`

---

### 🔹 `roles?: string[];`

Массив ролей пользователя:

```ts
['admin', 'editor']

```

Используется для:

- фильтрации маршрутов
- проверки доступа

---

### 🔹 `router: Router;` ✅ (обязательное)

Экземпляр **Vue Router**:

```ts
const router = createRouter(...)

```

Используется для:

- `router.addRoute()`
- управления навигацией

---

### 🔹 `routes: RouteRecordRaw[];` ✅ (обязательное)

Массив **базовых маршрутов**:

```ts
[
  { path: '/login', component: Login },
  { path: '/404', component: NotFound }
]

```

Это:

- статические маршруты
- которые существуют всегда

---

## Обязательные vs необязательные

<table id="bkmrk-%D0%9F%D0%BE%D0%BB%D0%B5-%D0%9E%D0%B1%D1%8F%D0%B7%D0%B0%D1%82%D0%B5%D0%BB%D1%8C%D0%BD%D0%BE%D0%B5-ro"><thead><tr><th>Поле</th><th>Обязательное</th></tr></thead><tbody><tr><td>`router`</td><td>✅</td></tr><tr><td>`routes`</td><td>✅</td></tr><tr><td>`fetchMenuListAsync`</td><td>❌</td></tr><tr><td>`layoutMap`</td><td>❌</td></tr><tr><td>`pageMap`</td><td>❌</td></tr><tr><td>`roles`</td><td>❌</td></tr><tr><td>`forbiddenComponent`</td><td>❌</td></tr></tbody></table>

---

## Как это используется на практике

```ts
generateAccessible(mode, {
  router,
  routes,
  pageMap,
  layoutMap,
  fetchMenuListAsync,
})

```

TypeScript:

- проверяет, что объект корректный
- подсказывает поля
- ловит ошибки на этапе разработки

---

## Коротко

> Этот интерфейс описывает **набор параметров**,  
> которые нужны для **генерации меню и маршрутов с доступами**  
> (часто — динамически и с бэкенда).