angular 2:queryParams onInit

时间:2017-04-25 14:31:45

标签: angular

我目前正在使用ActivatedRoute的queryParams遇到一些问题。我正在尝试实现一个系统,您可以使用queryParams =“?token = 1234”调用任何URL。如果提供此参数,AppComponent将使用此标记对用户进行身份验证。

原因是用户将在另一个应用程序中进行身份验证,该应用程序将接收令牌并将其转发给有角度的应用程序。

所以,在我的AppComponent中,我有以下代码:

ngOnInit() {

    this._route.queryParams.subscribe(queryParams => {
        if (queryParams['token'] != null) {
            let data;
            this._staffService.getStaffFromToken(queryParams['token']).subscribe(
                (response: any) => data = response,
                (error: Error) => console.error(error),
                () => {
                    if (data.token != null) {
                        this._staffService.setLoggedInStaff(data.staff);
                        this.processLogin();
                    } else {
                        this._router.navigateByUrl('/login');
                    }
                }
            );
        } else {
            if (this._staffService.getLoggedInStaff() != null) {
                this.processLogin();
            } else {
                this._router.navigateByUrl('/login');
            }
        }
    });
}

我完全理解能够订阅这些参数的想法,因为它是SPA,并且使用该应用程序时params可能会改变。

但是,当我转到以下网址:http://localhost:4200?token=1234时,它会立即导航到/ login。出于某种原因,当调用ngOnInit时,它不会立即检测到queryParam。当我将debounceTime 500添加到queryParams时,它确实可以正常工作,但在我看来并不是一个好的解决方案。

有没有人有一些建议?我尝试了不同的东西,但我一直有这个问题。

2 个答案:

答案 0 :(得分:1)

尝试将代码放入ngOnChanges()并查看ng2 Lifecycle

答案 1 :(得分:0)

使用可观察性时,您无法编写同步代码。

尝试一下。

constructor(private activatedRoute: ActivatedRoute) {}
ngOnInit() {
   const token = this.activatedRoute.snapshot.params['token'];
   Your code ...
}