有条件地渲染组件angular4

Question

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

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

基于webapi信息，我正在使用仪表板组件或登录组件进行导航。

我能够实现我的目标，但是没有达到我的期望，因为如果用户是SSO类型，则他能够在仪表板上导航，但在此之前，他还能够看到登录屏幕，因为该登录屏幕已经在我的路由表中。 .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，会话或本地存储中。 不要在本地任何地方持久保存任何敏感的用户数据，这是不安全的。