Показать параметры по пользователям
У меня 3 пользователя Admin, Supervisor и Student. Я хочу, чтобы администратор и руководитель могли редактировать и удалять данные студентов, в то время как студент может удалять и редактировать только свои собственные данные. Он может только просматривать чужие данные.
Я получаю роли для пользователя в json, как показано ниже:
Admin: ["Administrator"]
Supervisor: ["Supervisor", "Guest"]
Student: ["Student", "Guest"]
Вот что я пытаюсь сделать:
Exhibits.component.ts
getCurrentUser() {
this.userService.getCurrent()
.then(
(response) => {
this.currentUserId = response.id;
for (let role of response.roles) {
if (role === 'Administrator') {
this.canEdit = true;
} else if (role === 'Supervisor') {
this.canEdit = true;
} else if (role === 'Student') {
this.canEdit = false;
}
}
}
).catch(
(error) => console.info(error)
);
}
Exhibits.component.html
<div *ngIf = "canEdit && this.currentUserId === exhibit.userId">
<button md-icon-button click-stop-propagation color = "primary" [routerLink] = "['/mobile-content/exhibits/edit', exhibit.id]"
title = "{{ 'edit' | translate }}">
<md-icon>{{ !inDeletedPage ? 'edit' : 'remove_red_eye'}}</md-icon>
</button>
<button md-icon-button click-stop-propagation color = "warn" (click) = "deleteExhibit(exhibit)" *ngIf = "!exhibit.used && !inDeletedPage"
title = "{{ 'delete' | translate }}">
<md-icon>delete_forever</md-icon>
</button>
</div>
Я пытаюсь показать экспонаты, которые я получил в массиве в соответствии с userId. Это означает, что в ответах json я получаю «userId», который я пытаюсь сопоставить с userId текущего пользователя. Очень важно, что ученик может видеть только опции удаления и редактирования для созданной им выставки, но администратор и руководитель могут видеть опции редактирования и удаления для всех созданных пользователями выставок.
Может ли кто-нибудь помочь мне разобраться в этом?
используйте ngif else, чтобы показать / скрыть кнопки в соответствии с ролями пользователя
Ответы 1
Во-первых, я бы предложил преобразовать это в перечисление как на передней, так и на задней стороне, а не полагаться на сопоставление строк.
Но, судя по вашему коду, если я правильно читаю, ни один студент никогда не сможет иметь кнопку редактирования и удаления, потому что вы всегда устанавливаете значение false для этого типа пользователя.
Ваша вторая проблема будет в вашем *ngIf, в котором указано следующее:
*ngIf = "canEdit && this.currentUserId === exhibit.userId"
Это приведет к тому, что эти кнопки всегда будут скрыты в нежелательное время, потому что даже для администраторов и других пользователей вам нужно, чтобы условное совпадение идентификаторов пользователей оценивалось как истинное. Вам также не нужно указывать this в шаблоне.
Лично я бы сделал нечто подобное.
getCurrentUser() {
this.userService.getCurrent()
.then(
(response) => {
this.currentUserId = response.id;
for (let role of response.roles) {
if (role === 'Administrator') {
this.canEdit = true;
} else if (role === 'Supervisor') {
this.canEdit = true;
} else if (role === 'Student') {
if (this.currentUserId === this.exhibit.userId) {
this.canEdit = true;
} else {
this.canEdit = false;
}
}
}
}
).catch(
(error) => console.info(error)
);
}
Тогда вы сможете просто изменить свой шаблон * ngIf на:
*ngIf = "canEdit"
Кроме того, вы также можете изменить свою проверку роли на оператор switch, он будет более производительным и сделает ваш код более чистым.
ИЛИ вы можете сделать это, что приведет к тому же результату.
getCurrentUser() {
this.userService.getCurrent()
.then(
(response) => {
this.currentUserId = response.id;
for (let role of response.roles) {
if (role === 'Administrator') {
this.canEdit = true;
} else if (role === 'Supervisor') {
this.canEdit = true;
}
}
}
).catch(
(error) => console.info(error)
);
}
Код шаблона будет:
*ngIf = "canEdit || this.currentUserId === exhibit.userId"
Я до сих пор не совсем понимаю, в чем твоя проблема. Пожалуйста, сформулируйте вопрос еще раз?