Angular 17 及以上版本：如何添加防护或保护空路径、redirectTo 路由

Question

在我的情况下，我无法为redirectTo路由添加任何防护或任何内容，这是一条空路径。

我使用 MSAL 进行身份验证，MSAL 确实提供了防护，并且它适用于其他路由。

这就是我的情况。

每当用户在浏览器中输入基本网址（如 localhost:4200）时，然后 -

如果用户未登录（从应用程序中的 msal.isLoggedIn() 检查），它应该将他们重定向到 Microsoft 登录屏幕。这种情况正在发生，但暂时是加载仪表板屏幕。

如果用户已经登录，它应该检查用户角色（我有一个 userRole 服务）。如果角色有权访问应用程序，则应加载（“路径表示重定向至仪表板”），否则应重定向至“/insufficient-privilages”。这也发生了，但暂时加载了我不想要的仪表板。

我尝试像这样在子数组上方添加 canActivateChild

canActivateChild: [emptyPathRouteGuard]

我只是不知道如何进行这项工作。向 rediretTo 路由添加防护不起作用或者不应该按照文档进行操作。需要一些帮助。

export const routes: Routes = [
         {
               path: '',
               loadComponent:() => loadcomp //this is layout component
               canActivate: environment.sso ? [MsalGuard] : [],
               children: [
                          { 
                            path: '',
                            redirectTo: '/dashboard',      //this is where I am struggling
                            pathMatch: 'full',
                          },
                          {
                            path: 'reports',
                            loadComponent: () => //load component
                            canActivate: environment.sso ? [MsalGuard] : [],
                          },
                          {
                            path: 'dashboard',
                            loadComponent: () => //load component
                            canActivate: environment.sso ? [MsalGuard] : [],
                          }
                        ],
                     {
                        path: 'insufficient-privileges',
                        loadComponent: () => //load comp
        
                     },

         }


              

Answer 1

我刚刚检查了

Route

的文档，其中

redirectTo

接受重定向函数。您可以使用它来有条件地进行重定向。

redirectTo（字符串 | RedirectFunction）

当路径匹配时返回要重定向到的 URL 的 URL 或函数。
如果 URL 以斜杠 (/) 开头或函数返回 UrlTree，则为绝对，否则相对于路径 URL。
RedirectFunction 在注入上下文中运行，因此它可以调用注入来获取任何所需的依赖项。
当不存在时，路由器不会重定向。

由于原始代码未共享，因此看起来像这样。

function redirectBasedOnAuth(authService: AuthService) {
  return authService.isAuthenticated() ? 'dashboard' : 'insufficient-privileges';
}

export const routes: Routes = [
         {
               path: '',
               loadComponent:() => loadcomp //this is layout component
               canActivate: environment.sso ? [MsalGuard] : [],
               children: [
                          { 
                            path: '',
                            redirectTo: (route, state) => redirectBasedOnAuth(route.injector.get(AuthService))
                            pathMatch: 'full',
                          },
                          {
                            path: 'reports',
                            loadComponent: () => //load component
                            canActivate: environment.sso ? [MsalGuard] : [],
                          },
                          {
                            path: 'dashboard',
                            loadComponent: () => //load component
                            canActivate: environment.sso ? [MsalGuard] : [],
                          }
                        ],
                     {
                        path: 'insufficient-privileges',
                        loadComponent: () => //load comp
        
                     },

         }
    ];

              

重定向功能文章