Admin On Rest: компонент администратора должен повторно отображаться при правильном входе в систему

Поэтому я работаю с пользователями с определенными ролями и разрешениями. У двух из этих ролей есть собственная панель управления, а у остальных - нет. Итак, в основном я делаю что-то вроде этого на своем App.js:

const AdminProps = {
  title: <Header />,
  theme: getMuiTheme(SnapbackTheme),
  locale: 'en',
  restClient,
  authClient: AuthClient,
  loginPage: LoginPage
}

let AppLayout = <Admin {...AdminProps } />

if (userRoleIs(USER_ROLE_1)) {
  AppLayout = (
    <Admin {...AdminProps } dashboard={CustomDashboardForThisRole}>
      <Resource name="resource1" list={resource1List} />
    </Admin>
  )
}

if (userRoleIs(USER_ROLE_2)) {
  AppLayout = (
    <Admin {...AdminProps }>
      <Resource name="resource1" list={resource1List} />
    </Admin>
  )
}

return AppLayout

Как видите, в зависимости от пользователя, который вошел в систему, я могу выбрать, какие реквизиты должны быть у Admin. Это вроде как работает, проблема в том, что когда вы входите в систему с пользователем и выясняете, какая роль имеет, у меня нет правильного способа обновить Admin реквизиты и повторно отрендерить их.

Это вызывает пустой экран содержимого при входе в систему с пользователями, у которых есть настраиваемая панель инструментов, до тех пор, пока я не обновлю страницу и администратор не отобразит правильно с правильной панелью мониторинга для пользователя.

Мое уродливое решение на данный момент: window.location.reload(), когда вход в систему прошел успешно, но на секунду вы видите пустой экран содержимого, и это выглядит ужасно.

Мой вопрос: есть ли правильный способ повторно отрисовать компонент Admin из authClient?

Заранее спасибо! ????????


reactjs admin-on-rest
person Andrés Torres    schedule 23.06.2017    source источник

Ответы (3)


arrow_upward
1
arrow_downward

Рекомендуемый способ - использовать aor-permissions, в котором представлены компоненты <WithPermission> и <SwitchPermissions>. Вы можете использовать последнее, чтобы обернуть части, которые нужно перерисовать, на панели инструментов:

import React from 'react';
import { SwitchPermissions, Permission } from 'aor-permissions';
import authClient from './authClient';

const Dashboard = () => (
    <SwitchPermissions authClient={authClient}>
        <Permission value={USER_ROLE_1}>
            <CustomDashboardForThisRole />
        </Permission>
    </SwitchPermissions>
);

Затем импортируйте этот Dashboard компонент в свой Admin напрямую.

person François Zaninotto    schedule 26.06.2017
comment
Что, если мы просто хотим изменить содержимое заголовка в зависимости от входа в систему? Проверьте проблему здесь: stackoverflow.com/questions/49537944/ - person user2078023; 05.04.2018

arrow_upward
0
arrow_downward

Большая часть вашего кода не отображается, поэтому сложно прописать конкретное решение, но давайте предположим, что вы используете response + redux для сохранения состояния (если вы не используете redux, большинство комментариев все равно сохранятся) .

Где-то в вашем состоянии у вас будет ключ adminInfo с начальным значением false. На вашем сервере будет маршрут, по которому вы можете опубликовать имя пользователя и пароль, и если они в порядке, вы получите контент для реквизита администратора или что-то в этом роде.

Ваши комментарии будут получать данные из состояния, поэтому изначально вы должны отображать компоненты в соответствии с adminInfo, которые будут ложными. Когда пользователь вводит учетные данные, вы отправляете на сервер вызов ajax. Когда сервер отвечает реквизитами администратора, вы должны обновить свое состояние в adminInfo, чтобы данные были получены с сервера. Когда вы обновляете состояние, ваши компоненты будут перерисовываться, теперь они находят полную информацию администратора и отображаются соответственно.

person Davorin Ruševljan    schedule 23.06.2017
comment
Спасибо, чувак, да, но это то, что должен делать фреймворк admin-on-rest, я просто еще один пользователь его фреймворка и они сказали, что это не их проблема, и я должен опубликовать это здесь, wtf тогда: / - person Andrés Torres; 23.06.2017
comment
Понятно, надеюсь, что кто-нибудь с админом на отдыхе сможет вам помочь. - person Davorin Ruševljan; 23.06.2017
comment
Мы не сказали, что это не наш prb, просто мы обрабатываем ошибки только в github. Можете ли вы показать код компонента, содержащего опубликованный вами код? Я полагаю, это часть метода рендеринга чего-то? - person Gildas Garcia; 24.06.2017
comment
Если он не является частью метода рендеринга компонента, его невозможно повторно отрисовать. - person Gildas Garcia; 24.06.2017

arrow_upward
0
arrow_downward

У меня есть аналогичное требование, когда меню / ресурсы под элементом Admin должны отображаться в зависимости от того, кто вошел в систему. Подход, который я использую, заключается в отображении WrapperApp, которое отображает приложение Admin как дочернее. WrapperApp подключается к своему собственному тонкому слою Redux Store / Actions / Router, который заботится о поведении моего приложения при входе / выходе. В зависимости от того, кто вошел в систему, Wrapper решает, какой набор ресурсов будет передан дочернему элементу Admin. Теперь, когда истекает срок действия токена аутентификации / cookie, Admin authClient замечает ошибку и вызывает действие logout WrapperApp. Это перенаправит мой WrapperApp на страницу входа в систему, и цикл будет продолжаться дальше в зависимости от того, кто вошел в систему. AuthClient дочернего элемента Admin получает информацию о действиях приложения-оболочки. Как показано ниже:

<Admin ... authClient={authClient.withActions(wrapperActions)} .. />

withActions выполняет функции моего приложения-оболочки в AuthClient.

person Sundar Rajan Muthuraj    schedule 26.06.2017