关于 Angular CanActivate 的问题

Question

export class AuthGuard implements CanActivate {

    constructor(private PassportService: PassportService, private CookieService: CookieService, private router: Router) {

    }

    canActivate(next: ActivatedRouteSnapshot, state: RouterStateSnapshot) {
        console.log('yoyoyo');
        console.log(next);
        console.log(state);
        console.log('Need Login = ' + next.data.auth);
        console.log('PassportService isLogin = ' + this.PassportService.isLogin);
        console.log('PassportService userData = ' + this.PassportService.userData);

        if (next.data.auth === true) {

            if (this.PassportService.isLogin === true) {

                return true;

            }

            if (this.PassportService.isLogin === false) {

                //this.PassportService.getUserData()
                this.http.get('/api/user/data')
                    .subscribe(r => {

                        if ( r.success === true ){

                            this.PassportService.userData = r.content;
                            this.PassportService.isLogin = true;
                            return true;

                        }
                        if ( r.success === false ){

                            this.router.navigateByUrl('/passport/login');

                        }

                    })

            }

        }
        if (next.data.auth === false) {

            return true;

        }

    }

}

为什么subscribe里的return true;没有效果

---

虽然知道subscribe不能返回东西，但是这个要怎么解决

Answer 1

异步检测的需要返回Observable对象，你这里

this.PassportService.getUserData()
                    .subscribe(r => {

                        if ( r.success === true ){

                            this.PassportService.userData = r.content;
                            this.PassportService.isLogin = true;
                            return true;

                        }
                        if ( r.success === false ){

                            this.router.navigateByUrl('/passport/login');

                        }

                    })

并没有在最外层返回数据，subscribe内部的返回值外面无法接收

Answer 2

canActivateChild(next: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<boolean> | boolean {

        if ( this.PassportService.isLogin === false ) {

            return this.PassportService.getUserData()
                .pipe(
                    map((data: any) => {

                        if ( data.success === true ) {

                            this.PassportService.userData.portrait = data.content.portrait
                            this.PassportService.userData.nickname = data.content.nickname
                            this.PassportService.userData.email = data.content.email

                            this.PassportService.isLogin = true

                            return true

                        }

                        if ( data.success === false ) {

                            this.router.navigateByUrl('/passport/login')

                        }

                    })
                )

        } else {

            return true

        }

    }