Angular 5路由在Google登录回调中无法正常工作的技术咨询

Hey there, let's get your Google login routing sorted out! The issue you're facing is super common with third-party auth libraries like gapi—their callback functions run outside Angular's zone, which means Angular doesn't detect the navigation action you're trying to perform. Here's how to fix it step by step:

Step 1: Import and Inject NgZone #

First, you need to bring in Angular's NgZone service, which lets you run code inside Angular's change detection context. Update your component's imports and constructor:

import { Component, NgZone } from '@angular/core';
import { Router } from '@angular/router';
import { LoginService } from './path-to-your-login-service'; // Adjust the path as needed

@Component({
  // Your component metadata here
})
export class LoginComponent {
  constructor(
    private _loginService: LoginService,
    private _router: Router,
    private zone: NgZone // Inject NgZone here
  ) {}

  // ... your existing login methods
}

Step 2: Wrap Navigation in NgZone.run() #

Modify your googleLogin method to wrap the routing call inside zone.run(). Also, make sure you're handling the loginWithGoogle async call properly before navigating:

googleLogin() { 
  gapi.auth2.authorize({ 
    client_id: 'YOUR_ACTUAL_CLIENT_ID', // Replace with your real client ID
    scope: 'email', 
    response_type: 'code', 
    prompt: 'select_account' 
  }, (response) => { 
    if (response.error) { 
      console.error('Google auth error:', response.error);
      return; 
    } 

    // Handle the Google login service call first
    this._loginService.loginWithGoogle(response.code)
      .subscribe({
        next: () => {
          console.log('Google login successful!');
          // Run navigation inside Angular's zone
          this.zone.run(() => {
            this._router.navigate(['/dashboard']);
          });
        },
        error: (err) => {
          console.error('Login with Google failed:', err);
        }
      });
  }); 
}

Why This Works #

Third-party libraries like gapi execute their callbacks outside of Angular's default zone. When you run code inside zone.run(), Angular triggers change detection and recognizes the navigation action, ensuring the router behaves just like it does in your email login method.

Quick Checks to Rule Out Other Issues #

• Double-check that your loginWithGoogle method returns an Observable (or Promise) and that you're waiting for it to complete before navigating.
• Verify your Angular route configuration for /dashboard—make sure the route is defined correctly and the target component exists.
• Add console logs in the Google auth callback to confirm you're getting a valid response (no errors) before trying to navigate.

内容的提问来源于stack exchange，提问作者Faustas Narutis