重定向后保留尝试输入的网址参数

时间:2018-12-09 22:21:26

标签: angular amazon-cognito aws-amplify

在我的Angular项目中,我刚刚实现了Amazon Cognito Hosted UI来处理我的登录,如下所示:

Amazon Cognito Hosted UI

现在,当我的用户单击我的登录按钮时,他们将被重定向到https://[domain].amazoncognito.com/login?redirect_uri=http://localhost:4200/&response_type=code&client_id=[some id]之类的另一个URL进行登录,并在成功的情况下被重定向回我的Angular URL。

在实施该操作之前,我有一个简单的登录页面和一个authguard来保护我的路由,该路由存储了所尝试的URL,并在登录后重定向回了。而且因为我只是在Angular上,所以一切都工作顺利。

现在,由于Cognito托管UI的功能,当我的用户重定向到托管UI时,尝试的URL参数丢失了。

我的问题: 即使通过这种重定向,是否可以保留尝试输入的URL参数?

更多信息

我不再有登录组件,因为它由Cognito托管UI处理。

这是调用我的Cognito托管UI的组件的摘录:

navbar.component.ts

@Component({
  selector: 'app-navbar',
  templateUrl: './navbar.component.html',
  styleUrls: ['./navbar.component.scss']
})
export class NavbarComponent implements OnDestroy, OnInit {

  [...]

  constructor(
    @Inject(LOCALE_ID) protected localeId: string,
    private router: Router,
    private authService: AuthService,
    private usersService: UsersService
  ) { }

  [...]

  signIn() {
    this.authService.signIn();
  }

}

navbar.component.html

<div class="navbar-item" *appShowIfSignedIn="false">
  <a class="button" (click)="signIn()">Sign in</a>
</div>

这是我的AuthService的摘录:

auth.service.ts

@Injectable({ providedIn: 'root' })
export class AuthService {

  private url = 'https://' + '[domain].auth.eu-central-1.amazoncognito.com' + '/login?redirect_uri=' + 'http://localhost:4200/' + '&response_type=' + 'code' + '&client_id=' + '[some id]';

  constructor(
    private ngZone: NgZone,
    private authStore: AuthStore
  ) {
    Hub.listen('auth', this, 'AuthCodeListener');
  }

  onHubCapsule(capsule: any) {
    const { channel, payload } = capsule;
    if (channel === 'auth' && payload.event === 'signIn') {
      this.ngZone.run(() => {
        this.currentAuthenticatedUser().subscribe(
          (user: any) => {
            const isSignedIn = true;
            const accessToken = user.signInUserSession.accessToken.jwtToken;
            const sub = user.signInUserSession.accessToken.payload['sub'];
            this.authStore.update({
              signedIn: isSignedIn,
              accessToken: accessToken,
              sub: sub
            });
          }
        );
      });
    }
  }

  signIn() {
    window.location.assign(this.url);
  }

感谢您的帮助

1 个答案:

答案 0 :(得分:0)

我找到了一种方法,只需将尝试的URL参数存储在本地存储中即可。

这样,即使从托管用户界面重定向回我后,我也可以检索尝试的URL参数。