Блог

У меня есть 2 действия ,

   actions: CalendarEventAction[] = [

    {
      label: '<i class="material-icons mat-icon">edit</i>',
      
      onClick: ({ event }: { event: CalendarEvent }): void => {
         this.editCalendarEvent(event);
    }
    }, {
      label: '<i class="material-icons mat-icon">remove</i>',
      
      onClick: ({ event }: { event: CalendarEvent }): void => {
         this.removeCalendarEvent(event);
    }
    },
]
 

Но я хочу, чтобы только пользователь с ролью (пример: администратор) видел второй значок, событие удаления.

Как я могу скрыть второй значок для остальных пользователей и отобразить его для администратора?

Спасибо

Я еще не играл с angular, поэтому я ни в коем случае не лучший человек, чтобы ответить на этот вопрос, так что, надеюсь, кто-нибудь найдет лучшее решение. Однако на данный момент вы можете просто добавить условие внутри своей onClick функции, которое проверяет, есть ли у пользователя разрешение.

 onClick: ({ event }: { event: CalendarEvent }): void => {
    if(user.admin) {
        this.removeCalendarEvent(event);
    } else {
        alert("--!!! You Don't Have Permission To Perform This Action !!!--");
    }
}
 

Вы также можете попробовать загрузить добавление onload функции в свою метку и проверить, является ли пользователь администратором, как и раньше, и если нет, вы можете установить label.disabled="true"

 ...
label: '<i onload="checkPermission()" id="removeBtn" class="material-icons mat-icon">remove</i>',
...

checkPermission() => {
    if(!user.admin) {
       document.getElementById("removeBtn").disabled = true;
    }
}

 

или просто полностью спрячьте кнопку

 ...document.getElementById("removeBtn").display = "hidden";
...
 

Вам потребуется извлечь пользовательские данные (например, роли) из вашей базы данных на серверной части. Вы могли бы использовать node.js за это. Если нет, вы более восприимчивы к тому, что люди получат права администратора с помощью консоли.