angular - 无法保护 Azure 静态 Web 应用预览中的路由

Question

我已在 Azure“静态 Web 应用程序预览”中部署了 Angular 9 应用程序。使用 RouteModule 的 Angular 路由工作正常。但我无法通过 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 应用程序，您主要使用它来保护对服务器上 /api/{method} 文件夹下应用程序 API 方法的 Web 请求。 Angular 不知道这个文件。

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