在使用angular-oauth2-oidc的onTokenReceived中，NavigateByUrl不起作用

Question

我使用的是angular-oauth2-oidc包，我使用的是隐式流，(目前)我不能迁移到代码流。

我想导航到原来的网址时，流是结束，我有使用preserving state的文件建议。

我的问题是我不能从onTokenReceived函数导航，由navitageByUrl解析的promise可以通过false解析，但在控制台上没有错误：

export class AppComponent {
    url: string;    

    constructor(
        private oauthService: OAuthService, 
        private router: Router) {

        this.url = window.location.pathname; // Get requested url.
    }

    ngOnInit() {        
        this.oauthService.loadDiscoveryDocument().then(res => {
            console.log(res);
            this.oauthService.tryLogin({
                onTokenReceived: (info) => {
                    // Receive state and navitage to.
                    this.router.navigateByUrl(info.state).then(res => {
                        if (!res) {
                            console.error("Navigate to " + info.state + " after get token:" + res);
                        }
                    });
                }
            }).then(res => {
                if (!res) { // If not login init implicit flow passing url as state.
                    this.oauthService.initImplicitFlow(this.url);                
                }

            })
        })        

    }
}

但是，如果使用setTimeout在100毫秒后运行，则可以工作

onTokenReceived: (info) => {
    // Receive state and navitage to.
    setTimeout(() => {
        this.router.navigateByUrl(info.state).then(res => {
            if (!res) {
                console.error("Navigate to " + info.state + " after get token:" + res);
            }
        });
    }, 100); // With less than 100 not works.
}

有人能帮我吗？为什么navigateByUrl不工作？

Answer 1

我一直在调试angular路由器，以了解为什么导航结果为false。我已经看到，如果其他导航启动，则可以取消导航。好吧，我已经记录了路由器事件，我可以看到在我的导航过程中，其他导航开始了。

这是日志：

app.component.ts:31 NAVEvent- NavigationStart to /#id_token=eyJhbG(...hide for simplicity...)8da3798eac66
app.component.ts:31 NAVEvent- RoutesRecognized
app.component.ts:31 NAVEvent- GuardsCheckStart
app.component.ts:31 NAVEvent- ChildActivationStart
app.component.ts:31 NAVEvent- ActivationStart
app.component.ts:31 NAVEvent- GuardsCheckEnd
app.component.ts:31 NAVEvent- ResolveStart
app.component.ts:31 NAVEvent- ResolveEnd
app.component.ts:31 NAVEvent- ActivationEnd
app.component.ts:31 NAVEvent- ChildActivationEnd
app.component.ts:31 NAVEvent- NavigationEnd
app.component.ts:31 NAVEvent- Scroll
app.component.ts:50 TOKEN RECEIVED --> Here I received the token and init the navigation to original requested URL
app.component.ts:31 NAVEvent- NavigationStart to /data/orderByToken/f5c2a1af-b0fa-48ab-867d-d748f53d42fb
app.component.ts:31 NAVEvent- RouteConfigLoadStart
app.component.ts:31 NAVEvent- NavigationCancel   --> this cancel my navigation and causes false resolved.
app.component.ts:31 NAVEvent- NavigationStart to /welcome -> Angular navigate to /welcome due to I have a redirect on routing module.
app.component.ts:31 NAVEvent- RoutesRecognized
app.component.ts:31 NAVEvent- GuardsCheckStart
app.component.ts:31 NAVEvent- GuardsCheckEnd
app.component.ts:31 NAVEvent- ActivationEnd
app.component.ts:31 NAVEvent- ChildActivationEnd
app.component.ts:31 NAVEvent- NavigationEnd
app.component.ts:31 NAVEvent- Scroll

我在angular路由配置中有一个重定向，如下所示：

{ path:"", redirectTo: "welcome", pathMatch: "full"}{ path:"", redirectTo: "welcome", pathMatch: "full"}

不是angular-oauth2-oidc问题...

当导航承诺被解析为false时，导航到/welcome的操作就完成了，因此我决定再试一次，另一次运行导航，这一次可以工作。

类似于：

this.router.navigateByUrl(state).then(res => {
  if (!res) {
    this.router.navigateByUrl(state);
  }
});

因为如果导航失败会引发异常，只有当promise被解析为false时，没有异常，都是由于另一个导航取消了您的导航。

这解决了我的问题。