권한에 따른 메뉴 분기

선행 작업

권한에 따른 메뉴 분기는 User Context에 권한 값을 가지고 있어야합니다.

로그인 시에 setUser를 이용하여 권한 값을 주입하십시오.

import { useAuth } from 'src/hooks/useAuth'

const { setUser } = useAuth()

메뉴 컴포넌트

메뉴는 UserLayout에서 주입되어 렌더링됩니다.

따라서 아래의 VerticalNavItems() 를 수정하면 권한에 따른 메뉴 분기를 구현할 수 있습니다.

frontend/src/layouts/UserLayout.tsx

    <Layout
      hidden={hidden}
      settings={settings}
      saveSettings={saveSettings}
      contentHeightFixed={contentHeightFixed}
      verticalLayoutProps={{
        navMenu: {
          navItems: VerticalNavItems()

메뉴 파일 작성

시스템관리자, 관리자, 사용자 권한 별로 분기하는 경우 아래와 같은 파일을 생성합니다.

frontend/src/navigation/vertical/admin.ts

// ** Type import
import { VerticalNavItemsType } from 'src/@core/layouts/types'

const navigation = (): VerticalNavItemsType => {
  return [
    {
      sectionTitle: '관리자'
    },
    {
      title: '관리자',
      icon: 'bx:home',
      path: '/admin'
    }
  ]
}

export default navigation

frontend/src/navigation/vertical/system-admin.ts

// ** Type import
import { VerticalNavItemsType } from 'src/@core/layouts/types'

const navigation = (): VerticalNavItemsType => {
  return [
    {
      sectionTitle: '시스템관리자'
    },
    {
      title: '시스템관리자',
      icon: 'bx:home',
      path: '/systemAdmin'
    }
  ]
}

export default navigation

frontend/src/navigation/vertical/user.ts

// ** Type import
import { VerticalNavItemsType } from 'src/@core/layouts/types'

const navigation = (): VerticalNavItemsType => {
  return [
    {
      sectionTitle: '사용자'
    },
    {
      title: '사용자',
      icon: 'bx:home',
      path: '/user'
    }
  ]
}

export default navigation

컴포넌트 수정

frontend/src/layouts/UserLayout.tsx

import { useAuth } from 'src/hooks/useAuth'

import VerticalNavItemsForSystemAdmin from 'src/navigation/vertical/system-admin'
import VerticalNavItemsForAdmin from 'src/navigation/vertical/admin'
import VerticalNavItemsForUser from 'src/navigation/vertical/user'


const UserLayout = ({ children, contentHeightFixed }: Props) => {

  ...
  
  const { user } = useAuth()
  
  ...
  
  let menu
  if (user.role === 'SYSTEM_ADMIN') {
    menu = VerticalNavItemsForSystemAdmin()
  } else if (user.role === 'ADMIN') {
    menu = VerticalNavItemsForAdmin()
  } else if (user.role === 'USER') {
    menu = VerticalNavItemsForUser()
  }
  
  ...

  return (  
    <Layout
          hidden={hidden}
          settings={settings}
          saveSettings={saveSettings}
          contentHeightFixed={contentHeightFixed}
          verticalLayoutProps={{
            navMenu: {
              navItems: menu

위와 같이 수정하는 경우 User Context의 권한값을 확인하여 출력되는 메뉴가 분기되어 출력됩니다.