web-dev-qa-db-ja.com

angular 5-サインイン後に前のページをリダイレクトする

サインイン後、Angular5は前のページにリダイレクトします。

手動でURLを押すと、ログインしていない場合はログインページにリダイレクトされますが、ログイン後は入力したURLにリダイレクトされますが、これを使用してホームページにリダイレクトできます。

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

いくつかのアイデアがありますか？

angularloginrouteslogout
5
shakell

ガードを使用してログインページにリダイレクトする場合、ソースURLをqueryParamsに次のように配置できます。

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;
    }
}

ログイン後、クエリパラメータから元のページのURLを取得できます。

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'])
}
7
Venomy

ホームページにアクセスする前にURLを送信して、そこで使用することができます

@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 } });
    }
  }
}

したがって、ログインコンポーネントで、次のようにqueryParamsにアクセスできます。

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

  backToPreviousPage() {
    this.router.navigate([this.route.snapshot.queryParam.get('redirectTo')]);
  }
}
3
nicowernli

私の場合、queryParamsは正しく機能しません。これは、ユーザーがログインし、次にサインアップルートに移動した場合、クエリパラメーターを保持する必要があるためです。しかし、ログインする前にさらに手順がある場合、ユーザーがページを更新する場合、または地下鉄でインターネットが悪かった場合、または何か他のことが起こった場合、彼はパラメータを失い、知っている人にリダイレクトされます...しかし、リダイレクトするために必要なURLを設定した場合localStorageに移動し、login/signup/someelseステップの後、必要なURLにリダイレクトして、以前に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');
  }
}
0
Kurkov Igor

authService url: stringで変数を宣言し、auth.gaurd.tsでその変数を使用します

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

そして、login.tsでコーディングします

          if (this.authService`enter code here`.redirectUrl) {
            this.router.navigateByUrl(this.authService.redirectUrl);
          } else {
            this.router.navigateByUrl("/home");
          }
0
kapil dave