在不使用 Angular5 中的组件的情况下重定向页面

Question

登录或注册后，我想创建一个 class 来确定经过身份验证的用户的角色并将他重定向到正确的页面。除了使用 angular 组件之外，还有其他方法可以做到这一点吗？我不喜欢组件页面的是页面在重定向之前加载，即使组件不显示任何内容，它仍然使用来自 app.component.

的基本模板

我正在使用 Keycloak 进行注册和登录（这意味着它不是我正在开发的应用程序的一部分，我只能设置 redirectUri）。所以我只能重定向到一个 URL.

Answer 1

这是我在这个案例中使用的总体思路。

创建一个具有空白模板 (.html) 的登录组件。

确保也为其设置路由。

app.routing.ts

{ path: '', redirectTo: '/login', pathMatch: 'full' },
{ path: 'login', component: LoginScreenComponent},

登录-screen.component.ts

constructor(private keyCloakService: KeyCloakService, private router: Router) {}
ngOnInit() {
      // Do a call where you get logged in user and it's role, ex:
      let role = this.keyCloakService.getUserRole(); 

      // Do a redirect based on that role
      if(role == "admin){
           this.router.navigate(["/admin"]);
      }

  }

一旦你开始工作，我还建议将 AuthGuard 添加到你的角色路由中。

还有第二种，您可能会采用更简洁的方法，但如果您之前没有使用过 AuthGuard，它会稍微复杂一些。

简而言之，您将在您的 AuthGuard 服务中处理我给您的解决方案。这样您就可以避免创建登录组件，但结果是一样的。

关于app.component.ts的模板，通常的做法是你只有<router-outlet></router-outlet>它，因此你不加载任何布局，你有更多的自由。

编辑（下面问题的答案）： 您可以通过路由使用安全和非安全布局。例如：

  {
    path: 'admin',
    component: AdminLayoutComponent,
    canActivate: [Guard],
    children: [
      {
        path: '',
        loadChildren: './components/app-admin/secure.module#SecureModule'
      }
    ]
  }

并为 public 布局做同样的事情。这样你将只有在你的 app.component 中，并且将有更多的重定向等自由

在不使用 Angular5 中的组件的情况下重定向页面

Redirect page without using a component in Angular5

angular

angular-ui-router