Question

我的Authguard如下所示。

export class AuthGuard implements CanActivate {

  constructor(private accountService: AccountService,
              private router: Router) {

    }

  
  canActivate(
    next: ActivatedRouteSnapshot,
    state: RouterStateSnapshot): Observable<boolean> {
      return this.accountService.currentUser$.pipe(
        map(auth => {
          if (auth) {
            return true;
          }
          this.router.navigate(['pages/login'], {queryParams: {returnUrl: state.url}});
        })
      );
  }
}

帐户服务

export class AccountService {
  baseUrl = environment.apiUrl;
  private currentUserSource = new ReplaySubject<IUserToken>(1);
  currentUser$ = this.currentUserSource.asObservable();

  constructor(private http: HttpClient, private router: Router) {
     
  }

  loadCurrentUser(token: string) {
    if (token === null) {
      this.currentUserSource.next(null);
      return of(null);
    }
    let headers = new HttpHeaders();
    headers = headers.set('Authorization', `Bearer ${token}`);
    return this.http.get(this.baseUrl + 'user/current', { headers }).pipe(
      map((user: IUserToken) => {
        localStorage.setItem('token', user.token);
        this.currentUserSource.next(user);
      })
    );
  }

在appcomponent.ts文件中。

export class AppComponent implements OnInit {
  title = 'AdyaNew';

  constructor(
    private accountService: AccountService
  ) {}

  ngOnInit() {
    this.loadCurrentUser();
  }

  loadCurrentUser() {
    const token = localStorage.getItem('token');
    console.log(token);
    this.accountService.loadCurrentUser(token).subscribe(
      () => {
        console.log('Loaded user');
      },
      (error) => {
        console.log(error);
      }
    );
  }

在我的帐户路由中

const routes: Routes = [
  {
    path: '',
    component: AccountComponent,
    data: { breadcrumb: 'Account' }
  },
  {
    canActivate: [AuthGuard],
    path: 'checkout',
    component: CheckoutComponent,
    data: { breadcrumb: 'Checkout' }
  },

以上代码在结帐时工作正常。但是，在刷新签出组件时，它只是返回空白页。看起来authguard一直在等待currentusersource的可观察值。请帮我找出问题出在哪里？

谢谢

Answer 1

如果要处理刷新页面，则不应使用AppComponent#ngOnInit方法。使用APP_INITIALIZER提供程序来执行此操作。您想要在应用程序启动之前加载用户（如果已记录）。有大量样本可用，但您必须将Observable转换为Promise。
https://angular.io/api/core/APP_INITIALIZER

刷新页面时AuthGuard不起作用

1 个答案: