angular 5 - 登录后重定向上一页

Question

Angular 5 登录后重定向到上一页。

当我手动点击url时，如果没有登录，它会重定向登录页面，但登录后，它应该重定向到输入的 url 但现在我可以使用这个重定向到主页：

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

有什么想法吗？

Answer 1

您可以在进入主页之前发送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.queryParams.get('redirectTo')]
    );
  }
}

Answer 2

当您使用守卫重定向到登录页面时，您可以将源 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'])
}

Answer 3

在 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");
          }

Answer 4

对我来说，queryParams 不能正常工作，因为如果用户先登录，然后再转到注册路径，那么您需要保留查询参数。但是如果你在登录之前有更多的步骤，或者用户刷新页面，或者地铁上的互联网不好或者发生了其他事情并且他丢失了他的参数并且将被重定向到谁知道...... 但是如果你设置 needed URL 重定向到 localStorage 并且在 login/signup/someelse 步骤之后你可以将他重定向到 needed 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');
  }
}

Answer 5

对于 ANGULAR 7+

从 Angular 7.2 开始，您可以使用状态对象在链接到登录页面之前设置最后一个 url：

@Component({ ... })
class SomePageComponent {
  constructor(private router: Router) {}

  checkLogin() {
    if (!this.auth.loggedIn()) {
      this.router.navigate(['login'], { state: { redirect: this.router.url } });
    }
  }
}

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

  backToPreviousPage() {
    const { redirect } = window.history.state;

    this.router.navigateByUrl(redirect || '/homepage');
  }
}

angular 5 - 登录后重定向上一页

angular 5 - redirect the previous page after sign in

angular

login

routes

logout