如何从oidc客户端ts(Angular)获取令牌

Question

auth.service.ts

import { Injectable } from '@angular/core';
import { User, UserManager } from 'oidc-client-ts';
import { SettingsService } from './settings.service';
import { Observable, from } from 'rxjs';
const url: string = 'http://localhost:44418/';
@Injectable({
providedIn: 'root'
})
export class AuthService {
userManager: UserManager;
constructor(private appSettings: SettingsService) {
const settings = {
authority: appSettings.authority,
client_id: 'client',
redirect_uri: `${url}signin-callback`,
silent_redirect_uri: `${url}silent-callback.html`,
post_logout_redirect_uri: `${url}`,
response_type: 'code',
scope: 'openid profile offline_access scope'
};
this.userManager = new UserManager(settings);
}
public getUser(): Observable<User | null> {
return from(this.userManager.getUser());
}
public login(): Observable<void> {
return from(this.userManager.signinRedirect());
}
public renewToken(): Observable<User | null> {
return from(this.userManager.signinSilent());
}
public logout(): Observable<void> {
return from(this.userManager.signoutRedirect());
}
}

登录.组件.ts

import { Component, OnInit } from '@angular/core';
import { AuthService } from '../code/auth.service';
import { User } from 'oidc-client-ts';
import jwt_decode from 'jwt-decode';
import { switchMap, mergeMap, tap } from 'rxjs/operators';
import { HttpClient } from '@angular/common/http';
@Component({
selector: 'app-login',
templateUrl: './login.component.html',
styleUrls: ['./login.component.css']
})
export class LoginComponent implements OnInit {
isLoggedIn: boolean = false;
user: User;
claims: any;
constructor(private auth: AuthService, private http: HttpClient) { }
ngOnInit() {
console.log('LoginComponent.ngOnInit');
this.auth.getUser().pipe(
switchMap(user => {
console.log('this never runs.'); // <<<<<<<<<<<<<<<<<<<<<<<<<<<<< WHY?
if (user) {
this.isLoggedIn = true;
}
else {
this.isLoggedIn = false;
}
if (user && user.id_token) {
this.claims = jwt_decode(user.id_token);
console.log(JSON.stringify(this.claims));
}
else {
console.log('user is null');
}
return this.claims; // Seem to have to return something; don't know why.
})
);
}
login() {
console.log('click login');
this.auth.login()
}
logout() {
console.log('click logout');
this.auth.logout()
}
}

为什么代码不运行？我怎样才能拿到代币？

Answer 1

Observable没有自动执行。

可观测的解剖

使用新的Observable或创建运算符创建Observable，通过Observer订阅，执行向Observer传递next/error/complete通知，它们的执行可能被处置。

订阅Observables

订阅调用只是启动"；可观察的执行"；并将值或事件传递给该执行的观察者。

ngOnInit() {
this.auth.getUser().pipe(...)
.subscribe({
next: (response: any) => { /* TO-DO: Handle the successful scenario */ },
error: (err) => { /* TO-DO: Handle the successful scenario */ },
complete: () => { /* TO-DO: Handle event after next & error */ }       
});
}