Question

我的项目中有5个模块。在基于卷的创建，更新，删除和查看访问中对这些模块的卷访问。

我如何在angular 6中创建UI，并且在用户登录到应用程序并在共享服务中设置角色时需要角色。例如，管理员滚动访问所有服务和员工角色仅查看列表，而不能访问创建和删除。我是刚接触角的。

请帮助我基于Roll的身份验证中的任何代码或示例

Answer 1

您可以创建其他组件并有条件地渲染该组件。考虑你的例子。为此，我创建了2个组件 1.查看组件 2.创建组件。

喜欢考虑代码

<div>
   <button *ngIf="usertype!=='employeee">Delete</button> <!--show delete button if user is not employee-->
   <create *ngIf="usertype!=='employeee"></create> <!-- Show create component if usertype is not emplyee -->
   <view [data]="data"></view> <!-- view for all type of user-->
</div>

Answer 2

在创建按钮后，您将以任何方式提供用于创建，更新，删除和查看的特定按钮，以编程方式启用或禁用按钮。如果需要，请按照以下步骤操作

带有[禁用]选项的创建按钮，例如

<button text="click" [disabled]="isAuthorised">Create</button>

<button text="click" [disabled]="isAuthorised">Delete</button>

isAuthorised是在打字稿中的变量，根据用户角色将其设为boolean（true / false）。它将相应地启用或禁用按钮

Answer 3

您可以遵循许多不同的方法，但是使用route-guards根据特定条件限制路线的基本思想。

在您的情况下，您可以拥有在route-guard授权使用模块时延迟加载模块的路由，并进一步以相同的方式加载嵌套的路由。

确定路线模块。

{
   path:'/dashboard',
   loadChildren: './lazy.module#LazyModule'
   canActivate:[ModuleRouteGuard],
   data: {
      accessRoles: ['Manager','HR']
   }
}

LazyModule_Routes.ts

{
   path:'/board',
   component: ManagerBoard
   canActivate:[ChildRouteGuard],
   data: {
      accessRoles: ['Manager']
   },
   resolve: {
      userRoles: 'userRolesResolver'  //use this resolver service to get data inside component so to decide if user can read/write . OR you can also use activatedRoutes data
   }
}

Route-Gaurd.ts

@Injectable()
class ModuleRouteGuard implements CanActivate { (1)
  constructor(private userService: UserService) {}; (2)

  canActivate() {
    console.log("OnlyLoggedInUsers");
    if (this.userService.isLoggedIn()) { (3)
      return true;
    } else {
      window.alert("You don't have permission to view this page"); (4)
      return false;
    }
  }
}

您的应用解析器，它将服务器中的用户角色带入。

@Injectable()
class UserRolesResolver implements Resolve<Team> {
  constructor(private backend: Backend) {}

  resolve(
    route: ActivatedRouteSnapshot,
    state: RouterStateSnapshot
  ): Observable<any>|Promise<any>|any {
    //return this.backend.fetchTeam(route.params.id);
  }
}

Angular 6基于角色的身份验证

3 个答案: