有条件地渲染组件angular4

Question

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

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

根据 webapi 信息，我正在导航仪表板组件或登录组件。

我能够实现我的目标，但并不符合我的预期，因为如果用户是 SSO 类型，他可以在仪表板上导航，但在此之前，他还可以看到登录屏幕，因为它已经在我的路线中table 在 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

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

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

有条件地渲染组件angular4

conditionally render component angular4

typescript

angular2-directives

angular2-template

angular2-routing

angular