Как добавить динамическую защиту маршрута в angular из значения JSON?

Я пытаюсь добавить защиту маршрута в свое угловое приложение.

Я динамически строю маршруты из JSON, который имеет следующую структуру

 {
      "path": "software-upgrade",
      "title": "Software Upgrade",
      "canActivate": "AuthGuard",  // This is the route guard name
      "isMFE": true,
      "loadRemoteModule": {
        "type": "manifest",
        "remoteName": "software-upgrade",
        "exposedModule": "./Module"
      },
      "moduleName": "SoftwareUpgradeModule"
    },

Я использую значение canActivate при построении такого маршрута

routeArr.push({
          path: route.path,
          canActivate: [AuthGuard],   // this works
          // canActivate: [route.canActivate], // this does not work even though it is fetching the same value from JSON
        });

Я получаю следующую ошибку в консоли, если использую значение из JSON, но то же самое работает, если я напрямую указываю значение охранника.

Есть ли способ справиться с этим?

где route.canActivate ? Это уже загруженный файл или вы хотите динамически загружать файл и функцию?

brk 04.04.2024 09:14

я получаю этот файл через REST API, и он доступен во время построения маршрута

Syed Abdul Hannan 04.04.2024 09:15

@YongShun нет, это не ответ на мой вопрос

Syed Abdul Hannan 04.04.2024 09:17

извините, мне не удалось получить файл через REST API? Вы имеете в виду, что файл уже находится в базе кода и упакован, и вы динамически загружаете его? под извлечением файла для меня это означает, что вы загружаете файл с сервера

brk 04.04.2024 09:21

Я имел в виду, что у меня есть файл в активах, и я получаю его через угловой http-вызов. В любом случае есть решение ниже

Syed Abdul Hannan 04.04.2024 09:25
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Безумие обратных вызовов в javascript [JS]
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
2
6
111
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Вам нужно создать карту объектов, где ключом будет authGuard, а значением AuthGuard (фактический импорт).

import { AuthGuard } from 'some path';

export const DYNAMIC_ROUTING_MAP = {
    'authGuard': AuthGuard,
    ...
}

Тогда при динамической маршрутизации мы можем просто получить ссылку и установить ее!

routeArr.push({
   path: route.path,
   canActivate: [DYNAMIC_ROUTING_MAP[route.canActivate]], // <- changed here!
});

Другие вопросы по теме