如何解决如何在angular中重定向到身份服务器登录?
当用户访问应用程序时,我想立即重定向到身份服务器。在当前设置下,我有一个登录按钮,单击后会将用户重定向到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>
解决方法
从路由器导入{路由器}。在toyr构造函数 router: Router
上进行设置,然后
this.oidcSecurityService.checkAuth().subscribe((auth) => router.navigateByUrl('Your URL');
,
您可以通过实施CanActivate interface来在身份验证卫士的帮助下解决您的问题。如果 canActivate 返回false,则取消导航到路由,我们可以使用它来授权用户/将用户重定向到登录页面。
每个需要经过身份验证的用户的路由都将在路由定义的canActivate属性内引用您的身份验证防护。
{
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();
}
})
);
}
如果您需要更多帮助,请查看文档here。不过,文档并未提供带有可观察对象的示例。
,如果这对您来说是一个有效的选择,我个人建议切换到angular-oauth2-oidc。 (https://www.npmjs.com/package/angular-oauth2-oidc)
您可以在app.component.ts中执行以下操作:
this.oauthService.tryLogin().then((success: boolean) => {
if (!success) this.oauthService.initCodeFlow();
});
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。