Kątowy 5 przekierowanie do poprzedniej strony po zalogowaniu.

Kiedy ręcznie uderzam w adres URL, jeśli nie jest zalogowany, przekieruje się do logowania, ale po zalogowaniu należy przekierować do adresu URL, który wprowadził, ale teraz tylko mogę przekierować na stronę główną, używając tego: używając tego:

this.router.navigate(['/homepage']);

Mieć kilka pomysłów?

6
shakell 4 czerwiec 2018, 10:30

4 odpowiedzi

Najlepsza odpowiedź

Po przekierowaniu na stronę logowania z osłoną można umieścić adres URL źródłowy w queryParams jako takie:

canActivate(next: ActivatedRouteSnapshot,
            state: RouterStateSnapshot) {
    if (this.authService.isAuthenticated()) {
        return true;
    } else {
        console.log('Could not authenticate');
        this.router.navigate(['login'],{queryParams:{'redirectURL':state.url}});
        return false;
    }
}

Po zalogowaniu można uzyskać oryginalny adres URL strony z parametrów Query:

let params = this.route.snapshot.queryParams;
    if (params['redirectURL']) {
        this.redirectURL = params['redirectURL'];
    }

...

if (this.redirectURL) {        
    this.router.navigateByUrl(this.redirectURL,)
        .catch(() => this.router.navigate(['homepage']))
} else {

    this.router.navigate(['homepage'])
}
13
Venomy 4 czerwiec 2018, 07:56

Możesz wysłać adres URL przed wyjściem na stronę główną i użyć go tam

@Component({ ... })
class SomePageComponent {
  constructor(private route: ActivatedRoute, private router: Router) {}
  checkLogin() {
    if (!this.auth.loggedIn()) {
      this.router.navigate(['/homepage`], { queryParams: { redirectTo: this.route.snapshot.url } });
    }
  }
}

Więc w komponencie logowania możesz uzyskać dostęp do takich queryparams

@Component({...})
class LoginComponent {
  constructor(private router: Router, private route: ActivatedRoute) {}

  backToPreviousPage() {
    this.router.navigate([this.route.snapshot.queryParam.get('redirectTo')]);
  }
}
4
Venomy 4 czerwiec 2018, 08:28

Deklaruj zmienną w authService url: string i użyj tej zmiennej w swoim auth.gaurd.ts

      this.authService.redirectUrl = url;
      this.navigateTo("/login");
      return false;

A następnie kod w login.ts}

          if (this.authService`enter code here`.redirectUrl) {
            this.router.navigateByUrl(this.authService.redirectUrl);
          } else {
            this.router.navigateByUrl("/home");
          }
1
Arun Vinoth 24 grudzień 2019, 17:30

Dla mnie queryparams nie działa prawidłowo, ponieważ jeśli użytkownik zostanie zalogowany, a następnie przejdź do trasy rejestracji, więc musisz zachować zapytanie params. Ale jeśli masz więcej kroków przed logowaniem lub użytkownik odświeża stronę lub Internet był zły na metrze lub coś innego się stało i stracił params i zostanie przekierowany, kto wie ... ale jeśli ustawisz potrzebny adres URL do przekierowania Do Localstorage i po Login / SignUp / Itelse Krok można przekierować go do potrzebnego URL wcześniej usunąć ciąg z Localstorage.

// needed page
localStorage.setItem('redirectTo', this.router.url);
this.router.navigateByUrl('/login');
// login/signup/else step page
success => {
  const redirect = localStorage.getItem('redirectTo');
  if (redirect) {
    localStorage.removeItem('redirectTo');
    this.router.navigate(redirect);
  } else {
    this.router.navigate('defaultpath');
  }
}
1
Kurkov Igor 25 styczeń 2020, 13:02