AuthService in Angular2

Question

我目前正在Angular2中构建一个应用程序。因此，我实施了处理签名，注册等的授权服务。如果在ID_Token（Angular2-JWT）中签名的用户存储在LocalStorage中。用户的角色和许可存储在AuthService.userRoles和AuthService.userPerms中。

boolean属性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匹配所需的权限。也有效。

我的应用使用"主组件"。该主要组件是" public"，并且不是使用authguard。它是在主app.module内进行的，并且具有没有自己的路线。在此主要父组件的模板中，我获得了应用程序广泛的导航。

在此导航中是通往受验证者保护的路由的按钮，因此仅当用户被签名并在路由需要时具有某些权限或角色，才能访问。例如

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

如果用户单击此按钮，而不是>授权，则将其重定向到unauthorized路由。到目前为止的工作

我想通过使这些按钮仅在用户激活路由时可见来防止。

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

因此，在主appcomponent（处理导航）内，我想 check 模板内的每个按钮的用户播放器，然后将结果存储在这样的对象中：

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

此 check 由AuthService.isAuthorized(theRouteToBeActivated)处理，该CC_12在AppComponent构造器中调用，并与AuthService.userPerms中存储的用户权限匹配data.permission。

问题是，因为AppComponent是 public ，而不受Authguard保护，因此构造函数在未登录用户时运行，这是正确的。此时，称为AuthService.isAuthorized(theRouteToBeActivated)返回false，并将值存储在

中

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

这也是正确的。因此，如果用户被签名，他看不到他无法激活的路线的按钮。

，但问题是：在用户在AppComponents构造函数中签名的用户签名后， not not 再次调用，然后

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

保持原样。但是，在用户登录该函数之后，需要再次调用该功能，以使其返回true并更改

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

使模板中的按钮现在可见用户中的签名。目前，我需要在浏览器中重新加载应用程序。然后，在用户中签名的按钮可见。但是我不要重新加载。

我该如何解决？

Answer 1

您通过在路由参数中使用授权的警卫来实现这一目标。身份验证和授权之间存在区别。检查以下链接。

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