angular - Angular2+ canActivate ile bir bağlantıya yönlendirme yaparken redirectTo çalışmıyor

redirectTo, giriş yaptığımda canActivate olan bir bağlantıya yönlendirmede başarısız oldu.

redirectTo, çıkış yaptığımda düzgün çalışıyor, beni /login bileşenime yönlendiriyor ve giriş yaptıktan sonra /index öğesine redirectTo yapıyor.

Ama giriş yaptığımda '' üzerine takılıyor.

Ben authGuard’ıma console.log eklemiştim ve yönlendirme URL’si "/index" o fonksiyona gitti ve geliştirme aracında çökme olmadan '' durumuna yapıştı.

Ama canActivate'i yorum satırı haline getirdikten sonra, redirectTo eskisi gibi sorunsuz çalışıyor.

Bu arada, canActivate ile olan authGuard'im diğer durumlarda ( redirecTo hariç) sorunsuz çalışıyor

İşte benim app-routing.module.ts dosyam

/* import... */

const appRoutes: Routes = [
    { path: 'login', component: LoginComponent },
    { path: '', redirectTo : '/index', pathMatch: 'full' },
    { path: '**', component: PageNotFoundComponent }
];

/* ngmodel and export ... */

ve işte benim index-routing.module.ts dosyam

/* import ... */

const indexRoutes: Routes = [
    {
        path: 'index',
        component: IndexComponent,
        canActivate: [AuthGuard], //<- if comment this will work
    },
];

/*   ngmodel and export ... */

işte benim auth-guard.module.ts dosyam

/* import ... */

@Injectable()
export class AuthGuard implements CanActivate {
    constructor(
        private authService: AuthService,
        private router: Router
    ) { }
    canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): boolean {
        let url: string = state.url;
        //redirectTo did get in here
        console.log(url); //<-- this show /index 

        return this.checkLogin(url);
    }

    checkLogin(url: string): boolean {
        if (this.authService.login_data && (this.authService.login_data.userprofile || !this.authService.login_data.need_login)) {
            return true;
        }
        this.authService.get_login_data()
         .subscribe(
            data => {
                this.authService.login_data = data;
                if (data.userprofile || !data.need_login) {
                    return true;
                }
                this.authService.redirectUrl = url;
                this.router.navigate(['/login']);
                return false;
            },
            error => { this.authService.errMsg = <any>error;}
        );
    }
}

Bu arada projemi angular4.0.1'e güncelledim

Teşekkürler.

GÜNCELLEME:

Korumamın dönüş türünü boolean'dan Observable'a değiştirdim

ama yine de çalışmıyor.

İşte kullandığım kod.

    checkLogin(url: string): Observable<boolean> {
        if (this.authService.login_data && (this.authService.login_data.userprofile || !this.authService.login_data.need_login)) {
            console.log('gonna return observable true');
            return Observable.of(true);
            //return true;
        }
        this.authService.get_login_data()
        .subscribe(
            data => {
                this.authService.login_data = data;
                if (data.userprofile || !data.need_login) {
                    console.log('in subscribe and gonna return observable true');
                    return Observable.of(true);
                    //return true;
                }
                this.authService.redirectUrl = url;
                this.router.navigate(['/login']);
                return Observable.of(false);
                //return false;
            },
            error => { this.authService.errMsg = <any>error;}
        );
    }

Konsolumda, in subscribe and gonna return observable true yazısını aldım

GÜNCELLEME:

bunu kontrol ettikten sonra

AuthGuard, kullanıcıyı kontrol etmeden önce kimlik doğrulamanın bitmesini beklemez

Sorun, canActivate öğesinin subscribe bitmesini beklememesi olabilir.

Cevap #1

Şu anda AuthGuard içindeki checkLogin() fonksiyonunda:

checkLogin(url: string): boolean {
    if (this.authService.login_data && (this.authService.login_data.userprofile || !this.authService.login_data.need_login)) {
        return true;
    }
    this.authService.get_login_data()
     .subscribe(
        data => {
            this.authService.login_data = data;
            if (data.userprofile || !data.need_login) {
                return true;
            }
            this.authService.redirectUrl = url;
            this.router.navigate(['/login']);
            return false;
        },
        error => { this.authService.errMsg = <any>error;}
    );
}

Dönüş tipi boolean, bazı koşullarda true döner, bu tamam. Ama son kısımda bazı sorunlar var. Sonucu abone olana kadar hiçbir şey döndürmediniz ve sonuca göre döndürüyorsunuz.

Bu, bu fonksiyonun undefined döndüreceği anlamına gelir, bu yüzden canActivate kontrolü çalışmayacaktır.

[Güncellendi] Sonuçlardan kullanıcı verilerini ayarlamak istiyorsanız, bunu ayarlamak için authService.get_login_data() içinde do() kullanmalısınız. Sonuca abone olduğunuzda, bu 'do' fonksiyonu çağrılacaktır. Ve checkLogin() içinde, login sonucu verilerini boolean'a dönüştürmek için subscribe() yerine .map() kullanın.

Bu durumda, şu şekilde bir Observable türü döndürmelisiniz:

checkLogin(url: string): Observable<boolean> {
if (this.authService.login_data && (this.authService.login_data.userprofile || !this.authService.login_data.need_login)) {
    return Observable.of(true); // wrap true in Observable
}
return this.authService.get_login_data()
 .map(
    data => {
        if (data.userprofile || !data.need_login) {
            return true;
        }
        this.authService.redirectUrl = url;
        this.router.navigate(['/login']);
        return false;
    },
    error => { this.authService.errMsg = <any>error;}
);

}

Cevap #2

Abone olmayı map ile değiştirerek sorunumı çözdüm.

Angular2 canActivate() asenkron fonksiyon çağırma

İşte düzenledikten sonraki kodum.

checkLogin(url: string): Observable<boolean>|boolean {
    if (this.authService.login_data && (this.authService.login_data.userprofile || !this.authService.login_data.need_login)) {
        console.log('gonna return observable true');
        return Observable.of(true);
    }   
    return this.authService.get_login_data()
    .map(
        data => {
            this.authService.login_data = data;
            if (data.userprofile || !data.need_login) {
                console.log('in subscribe and gonna return observable true');
                //return Observable.of(true);
                return true;                                                                                                                                                
            }   
            this.authService.redirectUrl = url;
            this.router.navigate(['/login']);
            //return Observable.of(false);
            return false;
        },  
        error => { this.authService.errMsg = <any>error;}
    );  
}  

Haritada eğer Observable(true) döndürürsem hata alıyorum

Type 'Observable<Observable<boolean>>' is not assignable to type 'boolean | Observable<boolean>'.

Yardım ve öneriler için teşekkürler.