Mengendalikan Kebenaran Pengguna di JavaScript

Membangunkan aplikasi web yang mantap sering melibatkan pengurusan keizinan pengguna. Artikel ini menunjukkan kaedah yang bersih dan cekap untuk mengendalikan kebenaran pengguna di bahagian depan, tanpa mengira kerangka yang anda pilih (React, Vue, atau JavaScript biasa). Kami akan menganggap backend API yang tenang, tetapi coraknya menyesuaikan diri dengan seni bina lain.

Mari kita pertimbangkan permohonan pengurus dokumen dengan peranan seperti admin (akses penuh), editor (membuat, melihat, mengedit), dan tetamu (lihat sahaja). Backend harus memberikan maklumat peranan pengguna. Untuk contoh ini, tindak balas API mungkin termasuk harta accessLevel :

 {
  ID: 1,
  Tajuk: "Dokumen Pertama Saya",
  Pengarang: 742,
  AccessLevel: "Admin",
  Kandungan: {...}
}

Secara kritis, frontend tidak seharusnya menjadi penyokong tunggal keizinan; Pengesahan backend adalah penting untuk mengelakkan akses yang tidak dibenarkan.

Menubuhkan pemalar

Untuk kejelasan dan penyelenggaraan, tentukan pemalar untuk tindakan dan peranan dalam fail berasingan (misalnya, constants.js ):

 tindakan const = {
  Modify_file: "modify_file",
  View_file: "view_file",
  DELETE_FILE: "DELETE_FILE",
  Create_file: "create_file"
};

Peranan const = {
  Admin: "admin",
  Editor: "Editor",
  Tetamu: "Tetamu"
};

eksport {tindakan, peranan};

Menggunakan enum typescript akan meningkatkan keselamatan jenis. Pemalar ini menawarkan:

• Sumber Kebenaran Tunggal: Mudah melihat semua tindakan dan peranan.
• Jenis Keselamatan: Menghalang typos dan meningkatkan kebolehbacaan kod.
• Dokumentasi yang lebih baik: Memudahkan pemahaman untuk ahli pasukan.

Menentukan metpings kebenaran

Buat fail (misalnya, permissions.js ) untuk memetakan tindakan ke peranan:

 import {tindakan, peranan} dari "./constants.js";

const mappings = peta baru ();

mappings.set (actions.modify_file, [roles.admin, roles.editor]);
mappings.set (actions.view_file, [roles.admin, roles.editor, roles.guest]);
mappings.set (actions.delete_file, [roles.admin]);
mappings.set (actions.create_file, [roles.admin, roles.editor]);

Mappings lalai eksport;

Map ini menyediakan:

• Pengurusan Pusat: Mudah mengubahsuai keizinan.
• KESELAMATAN: Mudah untuk diuji dengan ujian snapshot.
• Kebolehbacaan: Gambaran keseluruhan kebenaran.

Melaksanakan cek kebenaran dalam UI

Katakan anda mempunyai komponen React yang menjadikan menu dropdown:

 import haspermission dari "./permissions.js";
import {actions} dari "./constants.js";

dropdown fungsi ({file}) {
  kembali (
    

{haspermission (fail, actions.view_file) &&
• Menyegarkan
} {haspermission (fail, actions.modify_file) &&
• Namakan semula
} {haspermission (fail, actions.create_file) &&
• Duplikat
} {haspermission (fail, actions.delete_file) &&
• Padam
}

); }

Ini menggunakan fungsi pembantu hasPermission (dijelaskan di bawah) untuk membuat item menu secara kondusif berdasarkan keizinan pengguna.

Fungsi hasPermission

Fungsi ini memeriksa jika pengguna mempunyai kebenaran yang diperlukan:

 import pemetaan dari "./permissions.js";

fungsi haspermission (fail, tindakan) {
  jika (! file? .accesslevel) kembali palsu;
  kembali mappings.has (tindakan) && mappings.get (tindakan). termasuk (file.accessLevel);
}

Eksport lalai haspermission;

Ini dengan ringkas memeriksa mappings untuk tindakan yang diberikan dan sama ada accessLevel pengguna dimasukkan.

Memperluas corak

Corak ini skala kepada senario yang lebih kompleks. Sebagai contoh, menambah cek lesen:

 // ... (pemalar untuk lesen) ...

const LicenseMappings = peta baru ();
// ... (tindakan peta ke lesen) ...

fungsi hasLicense (pengguna, tindakan) {
  // ... (logik untuk memeriksa lesen) ...
}

fungsi HASAccess (fail, pengguna, tindakan) {
  kembali hasPermission (fail, tindakan) && hasLicense (pengguna, tindakan);
}

Atau mengendalikan jenis fail yang berbeza:

 const typeMappings = peta baru ();
// ... (tindakan peta ke jenis fail dan lesen) ...

fungsi hastypepermission (fail, pengguna, tindakan) {
  // ... (logik untuk memeriksa kebenaran jenis fail) ...
}

Ini membolehkan kawalan berbutir ke atas keizinan. Ujian harus komprehensif, termasuk ujian snapshot untuk pemetaan dan ujian unit untuk fungsi kebenaran. Contoh lengkap menggunakan React and Testing boleh didapati di CodeSandbox . Ingat, pengesahan backend tetap penting.

Atas ialah kandungan terperinci Mengendalikan Kebenaran Pengguna di JavaScript. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!