无法在Azure静态Web应用预览中保护路由

Question

我已经在Azure“静态Web应用预览”中部署了Angular 9应用程序。 使用RouteModule的角度路由工作正常。 但是我无法通过routes.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"
    }
]

}

因此，理想情况下，当您通过[routerLink] =“ ['/ guest']”进入“ guest”时，按照“ routes.json”，它应将我重定向到“ / loginGoogle”。但是它没有发生。

请让我知道我做错了什么。预先感谢

Answer 1

Angular路由器用于客户端（应用内）导航。它拦截对浏览器URL的更改，然后使用该URL控制要在浏览器中显示或隐藏的组件。因此，浏览器URL并不对应于被调用服务器上的物理路径-而是您的Typescript（或js）代码需要明确地发出自己的Web请求，以提取需要填充组件的数据。

相反，routes.json保护服务器端物理路径。对于Angular应用程序，您主要将其用于将Web请求的安全请求发送到服务器上/api/{method}文件夹下的应用程序的API方法。 Angular不知道此文件。

要保护客户端Angular路由，您将需要query the inbuilt /.auth/me endpoint编写代码以拉回当前用户的角色列表，然后implement Angular route guards来防止未经授权的用户访问UI路由。 / p>