Перенаправление на защищенный маршрут после входа пользователя в систему не работает - Angular приложение

Question

Я следовал учебному пособию Angular и мне удалось заставить его работать до сих пор, но мое приложение не перенаправляет пользователя после входа на любую из страниц с включенной опцией «canActivate [AuthGuard]», я даже попытался нажать на любой из «canActivate [AuthGuard]» после входа в систему, и он ничего не меняет, ни URL, ни страницу, если я возьму «canActivate [AuthGuard]», я могу перейти к нему через выпадающее меню и все.

Пожалуйста, помогите мне найти проблему.

Я загрузил свой проект до сих пор в мой профиль GitHub, чтобы вы могли взглянуть на код, файлы, связанные с этой функцией: "app.module.ts", "app.component.ts", "auth-guard.service.ts" и "auth.service.ts".

https://github.com/jsalcedoa/oShop

Answer 1

Он не перенаправляет после входа в систему, потому что вы не говорите ему.

Ваш метод входа в службу аутентификации должен возвращать результат метода, который уже существует. Это, вероятно, обещание или наблюдаемое. Это позволит компоненту входа в систему знать, когда ответ входа в систему возвращается и будет вести себя соответствующим образом.

Если ответ входа в систему успешен, вам нужно перейти на любую страницу, которая подходит. В этом случае это либо обратный URL, который вы в настоящее время получаете в службе, либо маршрут по вашему выбору.

компонент входа

@Component({
  selector: 'app-login',
  templateUrl: './login.component.html',
  styleUrls: ['./login.component.css']
})
export class LoginComponent {
  constructor(private auth: AuthService,
    // inject Router and ActivatedRoute into components, not services
    private route: ActivatedRoute,
    private router: Router) { 
  }

  login() {
    // assuming promise will be returned from auth service
    // TODO: handle errors and display login error - out of scope for this question
    this.auth.login()
      .then(message => {
        // moved from auth service
        const returnUrl = this.route.snapshot.queryParamMap.get('returnUrl') || '/';
        // now do the navigation
        this.router.navigateByUrl(returnUrl);
      });
  }
}

auth услуга

login(): Promise<string> {
  // I'm assuming that this is a promise that returns a message 
  // for the purposes of demonstrating the general login pattern.
  return this.afAuth.auth.signInWithRedirect(new auth.GoogleAuthProvider());
}