Question

我登录时redirectTo无法重定向到canActivate的链接

我退出时redirectTo正常工作，登录后重定向到我的/login组件和redirectTo到/index。

但是当我登录时，它会坚持''。

我已将console.log添加到authGuard，重定向网址＆＃34; / index＆＃34;确实在''情况下坚持使用该功能而没有在开发工具中崩溃。

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

顺便说一句，我的canActivate版authGuard在其他情况下正常工作（排除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

感谢。

更新

我已将我的后卫从布尔值更改为Observable

但它仍然无效。

这是我用过的代码。

    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

checkLogin()的{{1}}：

AuthGuard

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

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

[已更新]您想要从结果中设置用户数据，您应该使用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;} ); }中的do()进行设置。当您订阅结果时，这样做会做出结果。函数将被调用。在authService.get_login_data()使用checkLogin()而不是.map()将登录结果数据映射到布尔值。

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

subscribe()

}

Answer 2

我通过更改订阅地图解决了我的问题。

Angular2 canActivate() calling async function

这是编辑后的代码。

{
    "type": "activity-widget",
    "options": {
      "jsonObject": {
        "surveillance": [
          {
            "name": "location",
            "value": 25,
            "max": 100
          },
          {
            "name": "reporting",
            "value": 58,
            "max": 80
          },
          {
            "name": "reporting",
            "value": 9,
            "max": 120
          }
        ]
      }
    },
    "title": "Activity"
  }

如果我返回Observable（true）

，地图中的

我收到错误

<activity-widget object="jsonObject"></activity-widget>

感谢您的帮助和建议。

Angular2 + redirect当重定向到canActivate

2 个答案: