Question

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

为此，我已经从ngInit事件的app组件向我的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

评论中回答了

1：使用路线防护。我想添加官方指南：https://angular.io/api/router/CanActivate

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

有条件地渲染分量angular4

1 个答案: