有条件地渲染组件 angular4

Question

我需要在我的应用程序中使用基于 owin 的身份验证来实现 SSO 登录和外部登录。如果用户是 sso（单点登录）类型用户，他将登陆仪表板组件，如果不是，则他将登陆登录组件。

为此，我在 ngInit 事件上从应用组件向我的 webapi 发出请求，以获取用户详细信息（令牌、用户访问权限、组和角色等）。

根据 webapi 信息，我在仪表板组件或登录组件中对其进行导航。

我能够实现我的目标，但这并不符合我的预期，因为如果用户是 SSO 类型，他可以在仪表板上导航，但在此之前，他还可以看到登录屏幕，因为它已经在我的路由表中app.routingmodule.ts 文件。

我有两个问题需要帮助-

1) 根据我的 API 响应呈现适当组件的最佳方式是什么？

2) 成功登录后管理用户数据（如用户详细信息、权限、access_token）的最佳方法是什么，我应该使用 sessionStorage 还是其他方式？

我的路由代码为-

const fidsRoutes: Routes = [
    { path: '', redirectTo: 'login', pathMatch: 'full' },
    { path: 'login', component: LoginComponent },
    { path: 'dashboard', component: DashBoardComponent }
  ];

我的应用组件 ngOnInit 事件作为-

ngOnInit() {

this.authenticationservice.userLogin(this.loginData)
   .subscribe(
   res => {
     if (res.access_token != null) {
       this.userDetails = res;

       sessionStorage.setItem('access_token', this.userDetails.access_token);
       sessionStorage.setItem('userId', <any>this.userDetails.Id);
       //const session = sessionStorage.getItem('access_token');

      // this.screenName = this.userDetails.Screen.split("~");
       //this.routeScreen = this.userDetails.Route.split("~");
       sessionStorage.setItem("UserId", <any>this.userDetails.Id);

       sessionStorage.setItem("MenuDataScreen", this.userDetails.Screen);

       sessionStorage.setItem("MenuDataRoute", this.userDetails.Route);

       this.router.navigate(['dashboardcomponent']);
     } 

     else {
       this.router.navigate(['logincomponent']);
     }
   },
   err => {
     this.router.navigate(['logincomponent']);
   }
   );
  }

}

Answer 1

在 cmets 中回答了 1：使用路线守卫。我想添加官方指南：https://angular.io/api/router/CanActivate

2) 将令牌存储在 cookie、会话或本地存储中是可以的，只要令牌在服务器端具有相当短的到期时间。不要在本地任何地方保存任何敏感的用户数据，这是不安全的。