Question

登录后，

Angular 5重定向到上一页。

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

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

有一些想法吗？

Answer 1

当您使用警卫重定向到登录页面时，您可以将源网址放在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;
    }
}

登录后，您可以从查询参数中获取原始页面网址：

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 2

对我来说，queryParams不能正常工作，因为如果用户登录，然后再转到注册路线，那么您需要保留查询参数。但是，如果您在登录之前有更多步骤，或者用户刷新了页面，或者地铁上的互联网不畅或者发生了其他事情，他失去了参数，将被重定向到知道的人... 但是，如果您将所需的URL设置为重定向到localStorage，并且在登录/注册/其他步骤后，您可以将其重定向至所需的URL，则可以从本地存储中删除该字符串。

// 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 3

适用于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');
  }
}

Answer 4

您可以在转到主页之前发送该网址并在那里使用

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

Answer 5

在Null中声明变量，并在您的Null中使用该变量

authService url: string

然后在auth.gaurd.ts

中进行编码

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

角度5 - 登录

5 个答案: