如何根据用户角色授予组件访问权限？

Question

我需要在angular js中构建一个小型应用程序，该组件的访问级别应基于角色，例如，我有3个组件（家庭，我的个人资料和产品），下面是角色代码

userPermissions = {
"userId": "1",
"email": "mail@gmail.com",
"role": "USER",
"permissionValues": [
    {
        "componentName": "home",
        "permissionValue": "READ"
    },
    {
        "componentName": "myprofile",
        "permissionValue": "READ-WRITE"
    }
    {
        "componentName": "product",
        "permissionValue": "NIL"
    }
],
"userStatus": "active",
"tokenStatus": "VALID",
"expiryTime": "1554276643000"
};

那么如何为此编写服务？