重定向后保留尝试的 URL 参数答案

【问题标题】：Keep attempted URL parameter after a redirection重定向后保留尝试的 URL 参数
【发布时间】：2018-12-09 22:21:25
【问题描述】：

在我的 Angular 项目中，我刚刚实现了 Amazon Cognito 托管 UI 来处理我的登录，如下所示：

现在，当我的用户单击我的登录按钮时，他们会被重定向到另一个 URL，例如 https://[domain].amazoncognito.com/login?redirect_uri=http://localhost:4200/&response_type=code&client_id=[some id] 以登录并在成功的情况下重定向回我的 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);
  }

感谢您的帮助

【问题讨论】：

你能把你的登录组件ts/认证组件ts贴在这里，以便我们帮忙吗？
这只是服务..缺少组件
组件是什么意思？您是指调用我的身份验证服务的组件？
正是..使用您的身份验证服务的组件
我添加了我的组件。基本上，我的导航组件使用按钮调用 url，我被重定向到托管的 UI URL（在 Angular 之外），然后在根 url http://localhost:4200/ 中返回到 Angular

标签： angular amazon-cognito aws-amplify

【解决方案1】：

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

这样，即使从托管 UI 重定向回来，我也可以检索我尝试的 URL 参数。

【讨论】：