如何重定向到身份服务器登录的角度？

Question

当用户访问应用程序时，我希望立即被重定向到标识服务器。使用当前的设置，我有一个登录按钮，它在单击时将用户重定向到ID服务器，但我希望删除该按钮，以便在打开应用程序时发生。

这是我的app.component.ts文件

import { OidcSecurityService } from 'angular-auth-oidc-client';

export class AppComponent implements OnInit {

  constructor(private ref: ChangeDetectorRef, public oidcSecurityService: OidcSecurityService) {
  }
  
  ngOnInit() {

    this.oidcSecurityService
    .checkAuth()
    .subscribe((auth) => console.log('is authenticated', auth));
    
  login() {
    this.oidcSecurityService.authorize();
  }
}

以及相应的html。

<div>
    <button (click)="login()">Login</button>
</div>

Answer 1

如果这是一个有效的选项，我个人建议切换到角OAuth2-oidc。(https://www.npmjs.com/package/angular-oauth2-oidc)

您可以在app.component.ts中这样做：

this.oauthService.tryLogin().then((success: boolean) => {
  if (!success) this.oauthService.initCodeFlow();
});

Answer 2

从路由器导入{路由器}。在toyr构造函数router: Router上设置它，然后

this.oidcSecurityService.checkAuth().subscribe((auth) => router.navigateByUrl('Your URL'); 

Answer 3

通过实现CanActivate接口，您可以在auth卫士的帮助下解决问题。如果canActivate返回false，则取消对路由的导航，我们可以使用它授权用户/将用户重定向到登录页面。

每个需要经过身份验证的用户的路由都会在路由定义中的canActivate属性中引用您的auth保护。

  { 
    path: 'admin', 
    component: AdminComponent, 
    canActivate: [AuthGuard]
  }

奥斯警卫：

@Injectable({
  providedIn: 'root',
})
export class AuthGuard implements CanActivate {
constructor(private oidcSecurityService: OidcSecurityService ) {}

  canActivate(next: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<boolean> {
    return this.oidcSecurityService.checkAuth().pipe(
     tap(isAuthenticated => {
         if (!isAuthenticated) {
             this.oidcSecurityService.authorize();
         }
     })
   );
  }

如果需要更多帮助，请查看docs 这里。尽管如此，医生们并没有提供一个可观察的例子。