NOTE: For the sake of simplicity this article is going to be based on React JS along with React Router and Node JS on Express JS for backend, all of which are awesome and do check them out.

에어비앤비, 페이스북, 유튜브 등과 같은 특정 대규모 애플리케이션이 어떻게 특정 사람에 대한 애플리케이션의 특정 부분을 차단하거나 특정 조건에 따라 기능을 출시하는지 궁금하신가요? 그들은 모두 RBAC라는 검증된 방법론을 사용합니다. 이 솔루션은 90년대에 주목을 받았으며 여전히 많은 형태로 널리 사용됩니다. RBAC는 제목에서 알 수 있듯이 Role Based Access Control의 약자이며 이 기사는 RBAC 게임을 이해하는 데 도움이 됩니다.

...

RBAC에 대해 고려해야 할 매개변수:-

1. 경로 경비 🛣️:
이것은 🔒를 인증하고 웹 앱에서 경로 또는 URL의 일부를 승인하는 프로세스입니다. 일반적으로 경로 경로 커플이 있는 라우터 스위치가 있습니다. 여기에서 경로가 단일 정보 소스 역할을 하기 위해 다른 파일에 유지되는 것을 볼 수 있습니다. 경로 대신 스위치에서 래퍼로 래핑하고 역할에 필요한 경로와 구성 요소를 전달하여 소품으로 렌더링합니다.

module.exports = {
    homePage: {
        route: '/',
        roles: ['ROLE_TEACHER', 'ROLE_ADMIN', 'ROLE_EXTERNAL_SOURCER']
    },
    createQuestion: {
        route: '/question-bank/create/:type/',
        roles: ['ROLE_TEACHER', 'ROLE_ADMIN', 'ROLE_EXTERNAL_SOURCER']
    },
    testAttempt: {
        route: '/student/test/:gid',
        roles: ['ROLE_TEACHER', 'ROLE_ADMIN', 'ROLE_STUDENT']
    }
};

역할.js

<Switch>
  <RouteWrapper
    exact
    path={routePaths.homePage.route}
    roles={routePaths.homePage.roles}
    Component={QuestionListPage}
  />
  <RouteWrapper
    exact
    path={routePaths.createQuestion.route}
    roles={routePaths.createQuestion.roles}
    Component={CreateQuestions}
  />
  <RouteWrapper
    exact
    path={routePaths.testListPage.route}
    roles={routePaths.testListPage.roles}
    Component={TestListPage}
  />
  <Route path="/error/:code">
    <ErrorComponent />
  </Route>
  <Route path="">
    <Redirect to="/error/404" />
  </Route>
</Switch>

라우터.js

const RouteWrapper = ({Component, ...props }) => {
    const auth = checkAuth();

    let role = getUserRole(),
        access = checkAccess(role, props.roles);

    if (!auth) {
        logout();
    } else if (auth && !access) {
        return <Redirect to="/error/401" />;
    }

    return (
        <Route
            {...props}
            render={routeProps => <Component {...routeProps} />}
        />
    );
};

경로.js

여기에서 경로 래퍼는 경로 및 사용자 역할 매트릭스에 필요한 역할에 따라 인증 데이터 및 액세스를 확인합니다. 인증되지 않은 경우 충돌을 방지하기 위해 앱에서 로그아웃합니다. 인증되었지만 경로에 액세스할 권한이 없는 경우 오류 페이지로 리디렉션됩니다. 인증 및 승인을 받으면 마침내 구성 요소를 렌더링합니다. 이 확인은 보호된 경로에 대한 모든 경로 변경에서 발생합니다.

2. 페이지의 일부에 대한 액세스 제한 🚏:
다른 사람에게 액세스 권한을 부여하면서 페이지(경로)의 기능이나 섹션을 차단하려는 특정 상황이 있을 수 있습니다. 방법은 다음과 같습니다.

import { useSelector } from 'react-redux';
import { allowedUserChecker } from 'utils';
import PropTypes from 'prop-types';

const RBAC = ({ allowedRoles, children }) => {
    let userRoles = useSelector(state => state.userInfo.roles);
    let access = allowedUserChecker(userRoles, allowedRoles);
    return access && children;
};

RBAC.propTypes = {
    allowedRoles: PropTypes.arrayOf(PropTypes.string),
    children: PropTypes.element
};

export default RBAC;

Rbac.js

이것은 RBAC HOC(고차 구성 요소)이며 글로벌 저장소에서 사용자 역할을 가져오고(다른 수단을 통해서도 가능) 사용자 역할 매트릭스 검사를 기반으로 액세스를 유도하려고 합니다. 액세스가 허용된 경우에만 래핑된 구성 요소를 렌더링합니다.

import RBAC from './dir/RBAC';
...
<RBAC allowedRoles={[ 'ROLE_AUTHOR', 'ROLE_ADMIN']}>
    <Button type="submit" label="VERIFY AND PUBLISH" />
</RBAC>
...

3. 백엔드 엔드포인트 보안 🔗:
마지막으로 우리는 백엔드가 API를 끝에서 보호하는지 확인해야 합니다.

Well there are a ton of ways to do this using some API gateway, Proxy Servers etc., For the sake of simplicity I’m assuming certain parameters. These parameters are not necessary and you can implement the logic in way that you need as the crux is core logic only.

먼저 프론트엔드에서 본 것과 유사한 경로 파일에 대한 역할이 필요합니다.

module.exports = {
    homePage: {
        route: '/',
        roles: ['ROLE_TEACHER', 'ROLE_ADMIN', 'ROLE_EXTERNAL_SOURCER']
    },
    createQuestion: {
        route: '/question-bank/create/:type/',
        roles: ['ROLE_TEACHER', 'ROLE_ADMIN', 'ROLE_EXTERNAL_SOURCER']
    },
    testAttempt: {
        route: '/student/test/:gid',
        roles: ['ROLE_TEACHER', 'ROLE_ADMIN', 'ROLE_STUDENT']
    }
};

역할.js

ℹ️ 중복될 수 있지만 DRY OCD 💠 문제가 있는 경우 이를 해결하기 위해 일반적인 위치에 호스팅해 보세요 😂 .

그러면 아래의 이 RBAC 미들웨어가 자동으로 관리하는 데 도움이 됩니다. 여기에 아주 간단한 액세스 확인 및 오류가 있는 권한 부여/응답이 있습니다.

module.exports = (rolesWithAccess) => {
  let {roles} = req.user;
  // eg:  roles = ['author'] comming from JWT token
  return (req, res, next) => {
    if (rolesWithAccess.length && !rolesWithAccess.includes(roles)) {
      return res.status(401).json({ message: 'Unauthorized' });
      // send however you want this one way of sending it.
    } else {
      next();
    }
  }
};

rbac 미들웨어

이제 우리는 이것을 우리의 경로와 연결해야 합니다. 승인되지 않은 사용자를 확보했습니다 🛑

const routes from './dir/routes';
const rbac from '/dir/to/rbac';
const publishController from '/dir/to/controllers';

...

app.use(routes.publish.route, rbac(routes.publish.roles), publishController);

...

라 엔드

Next JS 및 GraphQL과 같은 다른 플랫폼 구현에 대해 쓸 이 기사의 2부를 계속 지켜봐 주세요.

위의 기사를 개선하기 위한 수정/구현이 있고 재미있는 사실 경로 경로가 regex(/^\/(api|rest)\/.+$/)가 될 수 있다고 확신합니다. 이것은 이제 많은 분들이 알다. 마찬가지로, upGrad에서의 제 작업은 이제 제 경력을 향상시키기 위해 새로운 것을 배우는 것뿐 아니라 여러 사람들이 경력을 전환할 수 있도록 권한을 부여하는 플랫폼을 구축하는 것입니다. 완전히 온라인으로 진행되는 프로그램을 확인하려면 upgrad.com을 방문하십시오! 항상 열정적인 우리 팀과 함께 일하고 싶다면 careers page 을 확인하십시오. 우리는 항상 야심차고 재능있는 사람들을 기다리고 있습니다!