Как реализовать много ролевую авторизацию в React

Question

Я работаю над приложением, в котором у меня разные роли (администратор, пользователь, менеджер). Я хочу защитить маршрут администратора от менеджера, а обычный пользователь также отображает пользовательский интерфейс на основе роли пользователя. Я пытался, но мне не удалось, может кто-нибудь помочь мне, как достичь своей цели. Пример будет оценен по достоинству

Спасибо

Answer 1

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

Создать файл RoleBasedRouting.jsx

function RoleBasedRouting({
  component: Component, roles, ...rest
}) {
  return (
    <>
      { grantPermission(roles) && (
      <Route
        {...rest}
        render={(props) => (
          <>
            <Component {...props} />
          </>
        )}
      />
      )}
      {
        !grantPermission(roles) && (
          <Route
            render={() => (
              <>
                <Unauthorized /> // Unauthorized Page View (skippable)
              </>
            )}
          />
        )
      }
    </>
  );
}

Использовать его в вашем роутере вот так -

<Switch>
     <RoleBasedRouting exact path="/admin" component={AdminPage} roles={['ROLE_ADMIN']} />
     <RoleBasedRouting exact path="/user" component={UserPage} roles={['ROLE_USER']} />
     <RoleBasedRouting exact path="/manager" component={ManagerPage} roles={['ROLE_Manager']} />
     ...............
</Switch>

В функции grantPermission проверьте, есть ли у вошедшего в систему пользователя нужные роли. Пример -

export const grantPermission = (requestedRoles) => {
  const permittedRoles =  JSON.parse(localStorage.getItem('userRoles'));
 // in case of multiple roles, if one of the permittedRoles is present in requestedRoles, return true;
  return false;
};

Для условного рендеринга пользовательского интерфейса вы можете сделать то же самое. Напишите компонент UnlockAccess -

const UnlockAccess = ({ children, request }) => {
  const permission = grantPermission(request); // request = ['ROLE_ADMIN'] / ['ROLE_USER'] / ['ROLE_MANAGER']
  return (
    <>
      {permission && children}
    </>
  );
};

Теперь, используйте UnlockAccess компонент на странице Dashboard, как это -

<Dashboard>
    <UnlockAccess request={['ROLE_ADMIN']}>
         <>
              {/*Write code/components for Admin Dashboard*/}
         </>                    
    </UnlockAccess>
    <UnlockAccess request={['ROLE_USER']}>
         <>
              {/*Write code/components for User Dashboard*/}
         </>                    
    </UnlockAccess>
    <UnlockAccess request={['ROLE_MANAGER']}>
         <>
              {/*Write code/components for Manager Dashboard*/}
         </>                    
    </UnlockAccess>
</Dashboard>

Answer 2

Вы можете использовать HO C, чтобы проверить, разрешен ли пользователю, осуществляющему доступ к маршруту, доступ, т.е. если пользователь является администратором, который пытается получить доступ к панели администратора, является администратором. Если нет, то можете перенаправить его куда угодно.

export default function withAuth(WrappedComponent) {


const auth = (props) => {
    return (
        localStorage.getItem("userRole") === "admin" ?
        <WrappedComponent {...props} /> :
        <Redirect to = {{ 
            pathname: "/protected/login"
        }} />
    )
}

return auth;
}

Или вы можете поддерживать массив функций в localStorage с функциями, которые вы хотите предоставить своему пользователю.

Answer 3

Вы должны создать различные компоненты маршрута специально для всех ролей, например, AdminRoute, UserRoute и т. Д. c, и в этих компонентах вы можете проверить, является ли логин или пароль обычным пользователем.

или создайте общий компонент маршрута и передайте ему роль и путь в качестве реквизита