时间戳

首页 > 解决方案 > 登录到身份服务器的角度路由

angular - 登录到身份服务器的角度路由

问题描述

我正在尝试设置 Angular 和身份服务器。这个应用程序真的有两条路线。项目列表和项目详细信息。

这两个页面都需要保护。现在它有点工作。当我到达http://localhost:4200 时，它将显示带有标题但没有项目数据的项目列表页面。大约一两秒后，它重定向到身份服务器登录页面。

我不希望它显示带有标题的项目列表页面，我希望它直接进入登录页面。

const routes: Routes = [
  {
    path: "project-list",
    component: ProjectlistComponent,
    canActivate: [AuthorizationGuard]
  },
  {
    path: "project-details/:id",
    component: ProjectDetailsComponent,
    canActivate: [AuthorizationGuard]
  },
  { 
    path: "", 
    redirectTo: "project-list", 
    pathMatch: "full" 
  }

如果用户未通过身份验证，则在 AuthorizationGuard 中重定向到自动登录

  private checkUser(): any {
    console.log('AuthorizationGuard, canActivate');

    return this.oidcSecurityService.getIsAuthorized().pipe(
      tap((isAuthorized: boolean) => {
        console.log('AuthorizationGuard, canActivate isAuthorized: ' + isAuthorized);        

        if (!isAuthorized) {
          this.router.navigate(['/autologin']);
        }
      })
    );
  }

有没有更好的方法而不重定向到自动登录？

import { Component, OnInit, OnDestroy } from "@angular/core";
import { OidcSecurityService } from "angular-auth-oidc-client";

@Component({
  selector: "app-auto-component",
  templateUrl: "./auto-login.component.html"
})
export class AutoLoginComponent implements OnInit, OnDestroy {
  lang: any;

  constructor(public oidcSecurityService: OidcSecurityService) {
    this.oidcSecurityService.onModuleSetup.subscribe(() => {
      this.onModuleSetup();
    });
  }

  ngOnInit() {
    if (this.oidcSecurityService.moduleSetup) {
      this.onModuleSetup();
    }
  }

  ngOnDestroy(): void {}

  private onModuleSetup() {
    this.oidcSecurityService.authorize();
  }
}

标签： angularidentityserver4

解决方案

如果不是必须的话，我假设你authgaurd会返回checkUser()。那么你必须在管道内返回布尔值，所以将你的更改checkUser()为

private checkUser(): Observable<bool>{
     return this.oidcSecurityService.getIsAuthorized().pipe(
      map((isAuthorized: boolean) => {
        if (!isAuthorized) {
          this.router.navigate(['/autologin']);
        }
        return isAuthorized;
      })
    );
  }

推荐阅读