Невозможно защитить маршруты в Azure Stati c Предварительный просмотр веб-приложения

Question

Я развернул приложение Angular 9 в Azure 'Stati c Web App Preview'. Маршрутизация angular с использованием RouteModule работает нормально. Но я не могу защитить эти маршруты с помощью маршрутов . json. Как будто это вообще не оказывает никакого влияния. Совместное использование моих файлов "routes. json" ниже:

{
"routes": [
    {
        "route": "/guest",
        "allowedRoles": [
            "authenticated"
        ]
    },
    {
        "route": "/admin",
        "allowedRoles": [
            "authenticated"
        ]
    },
    {
        "route": "/loginGoogle",
        "serve": "/.auth/login/google?post_login_redirect_uri=/guest"
    },
    {
        "route": "/logout",
        "serve": "/.auth/logout?post_logout_redirect_uri=/"
    }
],
"platformErrorOverrides": [
    {
        "errorType": "NotFound",
        "serve": "/loginGoogle"
    },
    {
        "errorType": "Unauthenticated",
        "serve": "/loginGoogle"
    }
]

}

В идеале, когда вы go в 'guest' через [routerLink] = "['/ guest']", согласно 'routes. json' он должен перенаправить меня на '/ loginGoogle'. Но этого не происходит.

Пожалуйста, дайте мне знать, что я делаю неправильно. Заранее спасибо

Answer 1

Маршрутизатор Angular предназначен для навигации на стороне клиента (внутри приложения). Он перехватывает изменения URL-адреса браузера, и вы используете этот URL-адрес для управления тем, какие компоненты вы хотите показать или скрыть в браузере. Таким образом, URL-адрес браузера не соответствует физическому пути на вызываемом сервере - вместо этого ваш код Typescript (или js) должен явно делать свои собственные веб-запросы, чтобы получить данные, необходимые для заполнения ваших компонентов.

Напротив, routes.json защищает физические пути на стороне сервера. Для приложения Angular вы в первую очередь будете использовать его для защиты веб-запросов к методам API вашего приложения в папках /api/{method} на сервере. Angular не знает об этом файле.

Чтобы защитить маршруты Angular на стороне клиента, вам потребуется запросить встроенную /.auth/me конечную точку в коде, чтобы получить список ролей текущего пользователя, а затем реализовать Angular охранников маршрута для предотвращения несанкционированного доступа к вашим маршрутам пользовательского интерфейса.