我已在 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”。但它并没有发生。
请让我知道我做错了什么。提前致谢
最佳答案
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 路由。
关于angular - 无法保护 Azure 静态 Web 应用预览中的路由,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/62033757/