Angular 角度2：路由器高截获

假设我们有一个视图受到某种外部登录的保护。这是工作流程

用户尝试访问该页面

用户被重定向到外部登录

用户执行登录

用户将被重定向到受保护的页面

我尝试的第一件事是使用

routerOnActivate

设置一个钩子，以检查身份验证并将用户重定向到执行重定向的登录视图。这个登录视图也是用户在登录后结束的视图，因此我需要再次重定向到受保护的页面

路由器激活HomeComponent->导航（[“登录”]）

routerOnActivate LoginComponent->window.location.href=redirectUri

路由器激活登录组件->设置验证；导航（[“主页”]）

但是，在某些情况下存在竞争条件，在第2步或第4步，当它再次尝试导航时，导航仍然没有完成，结果出现错误：

EXCEPTION: TypeError: Cannot read property 'viewManager' of   nullBrowserDomAdapter.logError @ angular2.dev.js:23514BrowserDomAdapter.logGroup @ angular2.dev.js:23525ExceptionHandler.call @ angular2.dev.js:1145(anonymous function) @ angular2.dev.js:14801NgZone._notifyOnError @ angular2.dev.js:5796collection_1.StringMapWrapper.merge.onError @ angular2.dev.js:5700run @ angular2-polyfills.js:141(anonymous function) @ angular2.dev.js:5719zoneBoundFn @ angular2-polyfills.js:111lib$es6$promise$$internal$$tryCatch @ angular2-polyfills.js:1511lib$es6$promise$$internal$$invokeCallback @ angular2-polyfills.js:1523lib$es6$promise$$internal$$publish @ angular2-polyfills.js:1494lib$es6$promise$$internal$$publishRejection @ angular2-polyfills.js:1444(anonymous function) @ angular2-polyfills.js:243microtask @ angular2.dev.js:5751run @ angular2-polyfills.js:138(anonymous function) @ angular2.dev.js:5719zoneBoundFn @ angular2-polyfills.js:111lib$es6$promise$asap$$flush @ angular2-polyfills.js:1305
angular2.dev.js:23514 STACKTRACE:BrowserDomAdapter.logError @ angular2.dev.js:23514ExceptionHandler.call @ angular2.dev.js:1147(anonymous function) @ angular2.dev.js:14801NgZone._notifyOnError @ angular2.dev.js:5796collection_1.StringMapWrapper.merge.onError @ angular2.dev.js:5700run @ angular2-polyfills.js:141(anonymous function) @ angular2.dev.js:5719zoneBoundFn @ angular2-polyfills.js:111lib$es6$promise$$internal$$tryCatch @ angular2-polyfills.js:1511lib$es6$promise$$internal$$invokeCallback @ angular2-polyfills.js:1523lib$es6$promise$$internal$$publish @ angular2-polyfills.js:1494lib$es6$promise$$internal$$publishRejection @ angular2-polyfills.js:1444(anonymous function) @ angular2-polyfills.js:243microtask @ angular2.dev.js:5751run @ angular2-polyfills.js:138(anonymous function) @ angular2.dev.js:5719zoneBoundFn @ angular2-polyfills.js:111lib$es6$promise$asap$$flush @ angular2-polyfills.js:1305
angular2.dev.js:23514 TypeError: Cannot read property 'viewManager' of null
    at ElementInjector.getViewContainerRef (http://localhost:3000/node_modules/angular2/bundles/angular2.dev.js:12945:78)
    at AppViewManager_.getViewContainer (http://localhost:3000/node_modules/angular2/bundles/angular2.dev.js:11237:68)
    at http://localhost:3000/node_modules/angular2/bundles/angular2.dev.js:14555:48
    at Zone.run (http://localhost:3000/node_modules/angular2/bundles/angular2-polyfills.js:138:17)
    at Zone.run (http://localhost:3000/node_modules/angular2/bundles/angular2.dev.js:5719:32)
    at zoneBoundFn (http://localhost:3000/node_modules/angular2/bundles/angular2-polyfills.js:111:19)
    at lib$es6$promise$$internal$$tryCatch (http://localhost:3000/node_modules/angular2/bundles/angular2-polyfills.js:1511:16)
    at lib$es6$promise$$internal$$invokeCallback (http://localhost:3000/node_modules/angular2/bundles/angular2-polyfills.js:1523:17)
    at lib$es6$promise$$internal$$publish (http://localhost:3000/node_modules/angular2/bundles/angular2-polyfills.js:1494:11)
    at http://localhost:3000/node_modules/angular2/bundles/angular2-polyfills.js:243:5

他说，这个错误在复制和调试时很麻烦，但最终我发现它是针对这种竞争条件的

---

所以，问题是。。。我怎样才能确保在所有导航完成后才触发导航？我应该改用

routerCanActivate

hook吗？

我对Angular2（及其路由器）没有任何经验。但是在Angular和UI路由器中，我们实现了登录，我们禁用了路由器的激活，并在知道用户是否登录后手动进行了登录（在我们的例子中，基于OAuth的登录也涉及很少的REST调用）。所以我可能会尝试在Angular2中实现类似的功能（禁用路由器，让安全引导/用承诺初始化，然后初始化路由器）…您如何处理可以匿名访问的视图？重要的是让安全在路由器之前初始化。然后我们在路由器中有一个钩子，它只是检查路由是否需要身份验证。匿名用户没有特殊待遇。。。安全组件能够识别URL是否包含访问令牌，或者会话存储中是否存在有效令牌。如果不是，则访问是匿名的。可能您正在寻找注释，但它有一个