通过 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;并删除这些 2response_mode@Injectable({&nbsp;&nbsp; providedIn: 'root'&nbsp;})

Answer 2

将isSignedIn方法更改为基于承诺。&nbsp;isSignedIn(): Promise<boolean> {&nbsp; &nbsp; return new Promise((resolve, reject) => {&nbsp; &nbsp; &nbsp; this.manager.getUser().then(user => {&nbsp; &nbsp; &nbsp; &nbsp; resolve(user != null && !user.expired);&nbsp; &nbsp; &nbsp; });&nbsp; &nbsp; });&nbsp; }还有你的路线守卫：canActivate(): Promise<boolean> {&nbsp; &nbsp; return new Promise((resolve, reject) => {&nbsp; &nbsp; &nbsp; this.authService.isLoggedIn().then(result => {&nbsp; &nbsp; &nbsp; &nbsp; if (result) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; resolve(result);&nbsp; &nbsp; &nbsp; &nbsp; } else {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; this.authService.startAuthentication().finally(() => {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; reject(false);&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; });&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; });&nbsp; &nbsp; });&nbsp; }

Answer 3

2件事要检查：首先，打开浏览器的控制台，看看是否signinRedirectCallback() call抛出任何错误。其次，查看应用程序的会话存储，您是否看到身份验证流填充的任何用户数据？另一个观察：你不应该UserManager为每个页面创建实例；oauth with 的所有逻辑oidc-client都应该封装在一个服务中，该服务将被注入到应用程序的不同页面中。