Mengendalikan Nama Peranan Dinamik dalam Persekitaran Berbeza dengan useRoleManagement Hook (Bahagian 2)

Dalam bahagian pertama siri ini, kami meneroka asas pelaksanaan kawalan akses berasaskan peranan dalam React menggunakan cangkuk useRoleManagement. Jika anda belum membacanya, anda boleh menyemaknya di sini
Melaksanakan Kawalan Capaian Berasaskan Peranan dalam React: Menyelam dalam ke dalam useRoleManagement Hook.

Dalam bahagian kedua ini, kami akan menyelami lebih mendalam dalam mengurus nama peranan dinamik bergantung pada persekitaran yang berbeza, seperti pementasan dan pengeluaran. Ini penting untuk mengekalkan pengurusan peranan yang konsisten dan selamat merentasi pelbagai peringkat pembangunan.

Ikhtisar

Apabila membangunkan aplikasi, adalah perkara biasa untuk mempunyai nama peranan atau konfigurasi kebenaran yang berbeza untuk pelbagai persekitaran. Sebagai contoh, anda mungkin menggunakan nama peranan ujian atau olok-olok dalam pembangunan dan nama peranan sedia pengeluaran sebenar dalam persekitaran pengeluaran. Mengendalikan nama peranan dinamik ini dengan betul memastikan aplikasi anda berkelakuan secara konsisten dan selamat merentasi pelbagai peringkat kitaran hayatnya.

Konfigurasi Peranan Khusus Alam Sekitar

Untuk mengurus nama peranan secara dinamik, kami boleh memanfaatkan pembolehubah persekitaran. Pembolehubah ini membolehkan kami menentukan kunci peranan yang berbeza untuk persekitaran yang berbeza, yang kemudiannya boleh digunakan untuk memuatkan konfigurasi kebenaran yang sesuai.

Begini cara kami boleh mencapai ini:

1. Takrifkan Pembolehubah Persekitaran

Dalam fail .env.development dan .env.production anda, nyatakan kunci peranan untuk setiap persekitaran. Contohnya:

• .env.pembangunan

VITE_ROLE_KEYS_MANAGER=Manager_Test
VITE_ROLE_KEYS_USER=USER_Test
VITE_ROLE_KEYS_ADMIN=Admin_Test

• .env.pengeluaran

VITE_ROLE_KEYS_MANAGER=Prod_Manager
VITE_ROLE_KEYS_USER=Prod_USER
VITE_ROLE_KEYS_ADMIN=Prod_Admin

Persediaan ini memastikan aplikasi anda menggunakan nama peranan yang sesuai bergantung pada persekitaran yang dijalankan.

2. Kemas kini Objek kebenaran

Gunakan pembolehubah persekitaran ini untuk menentukan objek kebenaran secara dinamik. Objek kebenaran memetakan kunci peranan kepada kebenaran khusus untuk setiap peranan:

const permissions: Record<string, UserPermissions> = {
  [import.meta.env.VITE_ROLE_KEYS_MANAGER]: {
    partners: { add: false, view: false, edit: false, deleteRow: true },
    // ... other permissions
  },
  [import.meta.env.VITE_ROLE_KEYS_USER]: {
    partners: { add: false, view: false, edit: false, deleteRow: false },
    // ... other permissions
  },

  [import.meta.env.VITE_ROLE_KEYS_ADMIN]: {
    partners: { add: true, view: true, edit: true, deleteRow: true },
    // ... other permissions
  },
};

Sintaks import.meta.env membolehkan anda mengakses pembolehubah persekitaran yang ditakrifkan dalam fail .env anda.

3. Gunakan useRoleManagement Hook

Dalam bahagian pertama siri ini, kami meneroka asas kawalan akses berasaskan peranan dalam React menggunakan cangkuk useRoleManagement. Jika anda belum membacanya, anda boleh menyemaknya di sini.

Kait useRoleManagement mengekstrak peranan pengguna daripada token JWT yang dinyahkod, memetakannya kepada kebenaran menggunakan kekunci peranan khusus persekitaran, dan kemudian mengembalikan kebenaran yang berkaitan:

export function useRoleManagement() {
  const { pathname } = useLocation();

  const token = localStorage.getItem('token');

  let decodedToken: Realm | null = null;

  try {
    if (token) {
      decodedToken = jwtDecode<Realm>(token);
    }
  } catch (error) {
    console.error('Invalid token:', error);
  }

  const roles = decodedToken?.realm_access?.roles ?? [];

  const roleExists = ifRoleExists(roles);

  const rolePermissions = getPermissions(
    roleExists,
    pathname !== '/' ? pathname : '/partners',
  );

  if (!rolePermissions) {
    return {};
  }

  const {
    add,
    view,
    edit,
    deleteRow,
    confirm,
    include,
  } = rolePermissions as Permissions;

  return {
    add,
    view,
    edit,
    deleteRow,
    confirm,
    include,
  };
}

Kesimpulan

Dengan mengurus nama peranan secara dinamik melalui pembolehubah persekitaran, anda boleh memastikan kawalan akses berasaskan peranan aplikasi anda berkelakuan secara konsisten merentas persekitaran yang berbeza. Pendekatan ini memberikan fleksibiliti dan membantu mengekalkan pemisahan yang jelas antara konfigurasi pembangunan dan pengeluaran.

Atas ialah kandungan terperinci Mengendalikan Nama Peranan Dinamik dalam Persekitaran Berbeza dengan useRoleManagement Hook (Bahagian 2). Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!