Angular 2 存储作为路由参数传递的承载令牌最佳实践

Question

我有一个 Web 应用程序（我们称之为 app1），它将用户重定向到另一个利用 angular2 的应用程序（app2） . Bearer Token 作为路由参数从 app1 传递到 app2，然后将存储在本地存储中并在 中使用app2。起初我在我的 login.component 中添加了将令牌保存在 app2 上的逻辑，但我注意到我的登录页面在用户通过身份验证时闪烁了几秒钟。然后我决定将我的逻辑移动到我的 LoginGuard Class 实现 CanActivate 并且看起来像这样：

canActivate(route:ActivatedRouteSnapshot, state:RouterStateSnapshot) {
    var myToken = route.queryParams['app1Token'] || '';

    if (myToken !== "") {
      localStorage.setItem('app2Token', myToken)

    }

    if (!localStorage.getItem('app2Token')) {
      // not logged in so return true
      return true;
    }

    this.router.navigate(['/home']);
    return false;
}

我的问题是，在加载页面之前存储令牌的最佳做法是什么？我一直在谷歌搜索，发现 canActivate 应该只用于 'Decide if a route can be activated'。我还阅读了有关 Resolve 的内容，但我注意到它用于获取数据并在组件加载之前使其可用。

Answer 1

这是一个很好的问题，我去这里看看他们在这些场景中做了什么：

https://angular.io/docs/ts/latest/guide/router.html#!#guards

看起来您几乎按照他们的建议做了 -- 使用 CanActivate 做出有关身份验证的决定，并在必要时采取措施解决该问题。

唯一的改进建议可能是将您的 logged-in/localStorage 逻辑移动到服务中，然后注入它。

Angular 2 存储作为路由参数传递的承载令牌最佳实践

Angular 2 storing bearer Token being passed as a route Param best practice

angular2-routing

angular