不使用Angular5

Question

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

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

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> ，因此您不需要＆＃39;加载任何布局，你有更多的自由。

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

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

为公共布局做同样的事情。这样你只能在app.component中使用，并且可以更自由地进行重定向等。