重定向到带有 canActivate 的链接时，Angular2+ redirectTo 不起作用

Question

redirectTo无法重定向到带有 canActivate 的链接当我登录时.

redirectTo当我注销时工作正常，它重定向到我的 /login组件和 redirectTo至 /index登录后。

但它坚持''当我登录时。

我已经添加了 console.log到我的authGuard , 并且重定向 url "/index"确实在该函数中进入了 ''开发工具没有崩溃的情况。

但在评论 canActivate 之后, redirectTo像以前一样工作正常。

顺便说一下，我的 authGuard 是 canActivate在其他情况下工作正常(不包括 redirecTo )

这是我的 app-routing.module.ts

/* import... */

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

/* ngmodel and export ... */

这是我的 index-routing.module.ts

/* import ... */

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

/*   ngmodel and export ... */

这是我的 auth-guard.module.ts

/* 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;}
        );
    }
}

顺便说一句，我已经将我的项目更新为angular4.0.1

谢谢。

更新:

我已经将我的守卫返回从 bool 值更改为可观察的

但还是不行。

这是我用过的代码。

    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;}
        );
    }

在我的控制台中，我得到了 in subscribe and gonna return observable true

更新:

检查后检查此后

AuthGuard doesn't wait for authentication to finish before checking user

问题可能是canActivate不等待订阅结束。

Answer 1

在 AuthGuard 的 checkLogin() 中:

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;}
    );
}

它的返回类型是boolean，它返回true，在某些情况下，它是可以的。但是，后面的部分有一些问题。在您订阅结果并根据该结果返回之前，您没有返回任何内容。

这意味着，此函数将返回未定义，因此 canActivate 检查将不起作用。

[更新] 你想从结果中设置用户数据，你应该在你的 authService.get_login_data() 中使用 do() 来设置它。当您订阅结果时，将调用此“do”函数。在您的 checkLogin() 中使用 .map() 而不是 subscribe() 将登录结果数据映射到 bool 值。

在这种情况下，您应该返回一个 Observable 类型，例如:

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;}
);