通过 UserManager 使用 Service 时 User 为 Null

Question

使用 Angular 7 和OIDC-Client我创建了一个 AuthService，它公开了一些 UserManager 方法。当我signInRedirectCallback从 AuthService调用时，用户是null.如果我直接使用 UserManager 调用它，则用户不是null.更多详情如下：const settings : UserManagerSettings = {  authority: 'https://localhost:5005',  client_id: 'spa',  redirect_uri: 'https://localhost:5001/signin',  post_logout_redirect_uri: 'https://localhost:5001/signout',  response_mode: 'query',  response_type: 'code',  scope: 'openid profile email offline_access api',  filterProtocolClaims: true,  loadUserInfo: true};@Injectable({   providedIn: 'root' })export class AuthService {  private manager = new UserManager(settings);  private user: User = null;  constructor() {    this.manager.getUser().then(user => {      this.user = user;    });  }  isSignedIn(): boolean {    return this.user != null && !this.user.expired;  }  getClaims(): any {    return this.user.profile;  }  signInRedirect(args?: any): Promise<void> {    return this.manager.signinRedirect(args);  }  signInRedirectCallback(url?: string): Promise<void> {    return this.manager.signinRedirectCallback(url).then(user => {      this.user = user;    });  } // Other methods}我有一个 AuthenticateGuard 如下：export class AuthenticatedGuard implements CanActivate {  constructor(private authService: AuthService) { }  canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot) : boolean {    if (this.authService.isSignedIn())      return true;    this.authService.signInRedirect({ state: { url: state.url }});    return false;  }} 然后我的回调组件如下：import { Component, OnInit } from '@angular/core';import { AuthService } from '../shared/services/auth.service'import { UserManagerSettings, UserManager } from 'oidc-client';import { Router, ActivatedRoute } from '@angular/router';@Component({  selector: 'signin',  templateUrl: './signin.component.html'})

Answer 1

很少尝试

将您的 response_type 更改为此

response_type: 'id_token token'

并删除用户中的空值

private user: User;

并删除这些 2

response_mode

@Injectable({ 

  providedIn: 'root' 

})

Answer 2

将isSignedIn方法更改为基于承诺。

 isSignedIn(): Promise<boolean> {

    return new Promise((resolve, reject) => {

      this.manager.getUser().then(user => {

        resolve(user != null && !user.expired);

      });

    });

  }

还有你的路线守卫：

canActivate(): Promise<boolean> {

    return new Promise((resolve, reject) => {

      this.authService.isLoggedIn().then(result => {

        if (result) {

          resolve(result);

        } else {

          this.authService.startAuthentication().finally(() => {

            reject(false);

          });

        }

      });

    });

  }

Answer 3

2件事要检查：

• 首先，打开浏览器的控制台，看看是否signinRedirectCallback() call抛出任何错误。

• 其次，查看应用程序的会话存储，您是否看到身份验证流填充的任何用户数据？

另一个观察：你不应该UserManager为每个页面创建实例；oauth with 的所有逻辑oidc-client都应该封装在一个服务中，该服务将被注入到应用程序的不同页面中。