在角度刷新组件 - 谷歌身份验证 - 身份验证后导航到内部页面

Question

我有以下问题。也许我还没有很好地理解 Angular 是如何工作的。 我已经在我的代码中插入了谷歌身份验证，它可以工作。然后 JWT 被发送到 C# 中的后端，我从后端正确接收 JWT。基于正确的身份验证和授权，然后我想导航到内部页面。但是我并没有立即成功，只有当我按下F5时，因为在OnInit中有一个Redirect功能。

这是代码。我使用 Angular 11。

登录组件

export class LoginComponent implements OnInit, DoCheck {
  user: BehaviorSubject<User>;


  ngOnInit(): void {
    this.myRedirectTo();
  }

  myRedirectTo(): void  {
    let returnUrl = "";
    if (this.user != null)
      {
 
        if (this.user.value.ruolo == "ascritto") 
            returnUrl =Path.AscrittiHome;
        else if (this.user.value.ruolo == "segretario")     
          returnUrl = Path.SegretariHome;
        else if (this.user.value.ruolo == "amministratore")     
            returnUrl = Path.AmmininistratoreHome;
        if (returnUrl !== ""){

          this.router.navigate([returnUrl] );
 
        }
      }
  }
  
  async checkUser(): Promise<void> {
    const user = await this.authenticationService.checkUserRole$(this.selectedRole); 
    this.setUser(user);  

   }


  async authenticateGoogle(): Promise<void> {
    await this.authenticationService.authenticateGoogle();
    await this.checkUser();
   
    this.myRedirectTo();

  }
}
  

那么login.component.html就很简单了

 <mat-card-actions >
        <button  mat-button style="padding: 1rem;" (click)="authenticateGoogle()">
          <mat-icon style="width: 50px; height:30px"
                    svgIcon="logo"></mat-icon> Login With Google
          </button> 
      </mat-card-actions>

authentication.service 也很简单

  public checkUserRole$(ruolo: string): Promise<User> {
    
      const baseApiUrl = environment.baseapiUrl;
      const ApiPath = apiRoutes.authCheckAscrittoRuolo;
      let user = new BehaviorSubject<User>(
        JSON.parse(localStorage.getItem("user"))
      ).value;
      user.ruolo = ruolo;
      return this.http.post<User>(`${baseApiUrl}${ApiPath}`,
           user).toPromise();
      
  }

当我点击按钮使用 Google 登录时，我通过了身份验证，但页面没有重新加载。不显示任何错误。

然后，因为我将用户保存在内存中，所以当我重新加载页面时，会调用 myRedirectTo() 并显示正确的内部页面。

问题出在哪里？我有什么不明白的地方？

Answer 1

我已经完全改变了方法。

在 app.component.ts 中

   constructor(authService: AuthenticationService) {
      if (authService.isLoggedIn) {
      authService.myRedirectTo();
    }
   }

在 authentication.service.ts 中

@Injectable({
  providedIn: "root",
})
export class AuthenticationService {
  private userSubject: BehaviorSubject<User>;
  private isLogged: boolean;

  constructor( private http: HttpClient, 
    private authService: SocialAuthService,
    private router: Router
    ) {
    this.userSubject = new BehaviorSubject<User>(
      JSON.parse(localStorage.getItem("user"))
    );
    if (this.userValue != null) {this.isLogged = true;}
    else {this.isLogged = false;}
  }

  public get isLoggedIn(): boolean
  {
    return this.isLogged;
  }

  public get userValue(): User {
    return this.userSubject.getValue();
  }

  private signInWithGoogle() {
    return this.authService.signIn(GoogleLoginProvider.PROVIDER_ID);
  }

     
  public logout(): void {
    // remove user from local storage to log user out
    localStorage.removeItem("user");
    this.userSubject.next(null);
    this.isLogged = false;
  }

  public async authenticateGoogle(ruolo: string): Promise<void>  {
    let user: User = new User();
    await this.signInWithGoogle()
    .then(res => {
      user.tokenExtProvider= res.idToken;
      user.email= res.email;
      user.provider= "google";
      user.ruolo = ruolo;
      }
    )
    
    const userAUth: User = await this.checkUserRole$(user);
  
    if (userAUth)
        {
          this.userSubject.next(userAUth);
          localStorage.setItem("user", JSON.stringify(this.userSubject.value));
          this.isLogged= true;
          this.myRedirectTo();
        }
  }

  private async checkUserRole$(user: User): Promise<User> {
    
      const baseApiUrl = environment.baseapiUrl;
      const ApiPath = apiRoutes.authCheckAscrittoRuolo;
      return await this.http.post<User>(`${baseApiUrl}${ApiPath}`,
           user).toPromise();
      
  }

  public  myRedirectTo(): void  {
    let returnUrl: String = "";
    if (this.userValue != null)
      {
        if (this.userValue.ruolo == "ascritto") 
            returnUrl =Path.AscrittiHome;
        else if (this.userValue.ruolo == "segretario")     
          returnUrl = Path.SegretariHome;
        else if (this.userValue.ruolo == "amministratore")     
            returnUrl = Path.AmmininistratoreHome;
        if (returnUrl !== ""){
          this.router.navigate([returnUrl]);
        }
      }
  }
    
}

然后是 login.component

 import { AuthenticationService } from "../../core/services/authentication.service";
  
@Component({
  selector: "app-login",
  templateUrl: "login.component.html",
  styleUrls: ["login.component.css"],
})
export class LoginComponent implements OnInit, DoCheck {
  loginForm: FormGroup;
  loading = false;
  submitted = false;
  selectedRole: string;
  user: BehaviorSubject<User>;
     
  constructor(
    private authenticationService: AuthenticationService,
    ) {
  }

  ngOnInit(): void {
 
  async authenticateGoogle(): Promise<void> {
    await this.authenticationService.authenticateGoogle(this.selectedRole);
  }
}
  

HTML 总是一样的