Question

我目前正在使用angular2构建应用。因此，我实现了一个处理登录，注册等的AuthService。如果登录id_token（angular2-jwt）的用户存储在localStorage中。用户的角色和权限存储在AuthService.userRoles和AuthService.userPerms。

中

布尔属性AuthService.isAuthenticated使用来自angular2-jwt的函数tokenNotExpired()，如果用户已注销或存储在localStorage中的令牌已过期，则返回false。如果登录AuthService.isAuthenticated的用户已更新为true;

我获得了使用AuthGuard的路由，只允许经过身份验证的用户通过检查AuthService.isAuthenticated属性来激活此路由。

如果某条路线如下：

{
  path: "somewhere",
  component: SomeComponent,
  canActivate: [AuthGuard],
  data: {
    permissions: [
      "add:some",
      "edit:some"
    ]
  }
}

相同的AuthGuard通过将AuthService.userPerms与路由data.permissions匹配来检查当前已登录的用户是否具有所需的权限。 也适用。

我的应用使用“主要组件”。这个主要组件是“公开”，不使用AuthGuard。它在主app.module内引导，并且没有自己的路线。在这个主要父组件的模板内，我得到了应用程序的广泛导航。

此导航中包含受AuthGuard保护的路由按钮，因此仅在用户登录且具有某些权限或角色时才可访问（如果路由需要）。例如

<button [routerLink]="/somewhere">Somewhere</button>

如果用户点击此按钮且不授权，则会将其重定向到unauthorized路由。 到目前为止工作

我想通过在用户能够激活路线时仅显示这些按钮来阻止。

<button [routerLink]="/somewhere"
  *ngIf="isAuthorized["buttonSomewhere"]">
  Somewhere
</button>

因此，在主AppComponent（处理导航）中，我想检查模板内每个按钮的userPermissions，并将结果存储在如下对象中：

/* AppComponent */
public isAuthorized = {
   buttonSomewhere = true;
}

此检查由AuthService.isAuthorized(theRouteToBeActivated)处理，该data.permission在AppComponent构造函数内部调用，并将路由AuthService.userPerms与存储在AuthService.isAuthorized(theRouteToBeActivated)中的用户权限相匹配。

问题是，由于AppComponent public 且不受AuthGuard保护，因此构造函数在用户未登录时运行，这是正确的。此时，被调用的/* AppComponent */ public isAuthorized = { buttonSomewhere = false; }返回false并将值存储在

中

AuthService.isAuthorized(theRouteToBeActivated)

也是对的。因此，如果用户退出，则他看不到他无法激活的路线的按钮。

但问题是：用户登录AppComponents构造函数中调用的/* AppComponent */ public isAuthorized = { buttonSomewhere = false; }后再次调用 NOT ，

/* AppComponent */
public isAuthorized = {
  buttonSomewhere = true;
}

仍然保持原样。但是，用户登录后需要再次调用该函数，以便返回true并更改

function prepend(elem, list){
   if (list.rest == null)
      list.rest = {value:elem, rest:null};
   else
     prepend(elem, list.rest);
   return list;
}

以便模板中的按钮现在对已登录的用户可见。目前我需要在浏览器中重新加载应用程序。然后按钮对登录用户可见。但我不想重装。

我怎么解决这个问题？

Answer 1

您可以通过路线参数中的授权后卫来实现此目的。身份验证和授权之间存在差异。请检查以下链接。

https://angular.io/docs/ts/latest/guide/router.html#!#can-activate-guard

Angular2中的AuthService

1 个答案: