Cara menggunakan Vue untuk pengurusan kebenaran dan kawalan akses-View.js-php.cn

Cara menggunakan Vue untuk pengurusan kebenaran dan kawalan akses

王林

Lepaskan： 2023-08-02 21:01:48

asal

1874 orang telah melayarinya

Cara menggunakan Vue untuk pengurusan kebenaran dan kawalan akses

Dalam aplikasi web moden, pengurusan kebenaran dan kawalan akses ialah fungsi kritikal. Sebagai rangka kerja JavaScript yang popular, Vue menyediakan cara yang mudah dan fleksibel untuk melaksanakan pengurusan kebenaran dan kawalan akses. Artikel ini akan memperkenalkan cara menggunakan Vue untuk melaksanakan pengurusan kebenaran asas dan fungsi kawalan akses, serta melampirkan contoh kod.

Tentukan Peranan dan Kebenaran
Sebelum anda bermula, anda perlu terlebih dahulu menentukan peranan dan kebenaran dalam permohonan anda. Peranan ialah set kebenaran tertentu dan kebenaran boleh menjadi keupayaan untuk mengakses halaman tertentu atau melakukan tindakan tertentu. Sebagai contoh, pentadbir mungkin mempunyai kebenaran untuk mengedit dan memadam pengguna, manakala pengguna biasa mungkin hanya mempunyai kebenaran untuk melihat pengguna.

Dalam Vue, kita boleh menggunakan pemalar atau penghitungan untuk menentukan peranan dan kebenaran. Berikut ialah contoh mudah:

// 定义角色
const ROLE_ADMIN = 'admin';
const ROLE_USER = 'user';

// 定义权限
const PERMISSION_EDIT_USERS = 'edit_users';
const PERMISSION_DELETE_USERS = 'delete_users';
const PERMISSION_VIEW_USERS = 'view_users';

Salin selepas log masuk

Mencipta Laluan dan Pengawal
Dalam aplikasi Vue, penghalaan adalah sangat penting. Kami boleh menggunakan Penghala Vue untuk mentakrifkan setiap halaman aplikasi dan menggunakan pengawal penghalaan untuk pengesahan kebenaran. Pengawal laluan adalah fungsi khas yang dipanggil sebelum pengguna mengakses halaman.

Berikut ialah contoh konfigurasi penghalaan mudah:

import VueRouter from 'vue-router';
import { ROLE_ADMIN, PERMISSION_EDIT_USERS, PERMISSION_DELETE_USERS, PERMISSION_VIEW_USERS } from './constants';

const routes = [
  { path: '/users', component: UsersList, meta: { requiresAuth: true, permissions: [PERMISSION_VIEW_USERS] } },
  { path: '/users/:id', component: UserDetails, meta: { requiresAuth: true, permissions: [PERMISSION_VIEW_USERS] } },
  { path: '/users/create', component: CreateUser, meta: { requiresAuth: true, permissions: [PERMISSION_EDIT_USERS] } },
  { path: '/users/:id/edit', component: EditUser, meta: { requiresAuth: true, permissions: [PERMISSION_EDIT_USERS] } },
];

const router = new VueRouter({
  routes,
});

// 路由守卫
router.beforeEach((to, from, next) => {
  const requiresAuth = to.matched.some((route) => route.meta.requiresAuth);
  const permissions = to.meta.permissions;

  if (requiresAuth) {
    // 验证用户是否登录
    if (!isLoggedIn()) {
      next('/login');
    }
    // 验证用户是否有访问权限
    else if (!hasPermissions(permissions)) {
      next('/403');
    } else {
      next();
    }
  } else {
    next();
  }
});

Salin selepas log masuk

Dalam contoh di atas, kami telah menentukan beberapa laluan dan menggunakan medan meta untuk menentukan kebenaran yang diperlukan untuk mengakses halaman tersebut. Kemudian, kami melakukan pengesahan kebenaran dalam fungsi beforeEach. Jika pengguna tidak log masuk atau tidak mempunyai kebenaran yang diperlukan, kami boleh mengubah hala pengguna ke halaman lain. meta字段来指定需要哪些权限才能访问该页面。然后，我们在beforeEach函数中进行权限验证。如果用户未登录或没有所需的权限，我们可以将用户重定向到其他页面。

实现权限验证逻辑
要实现访问控制和权限管理，我们需要编写一些逻辑来验证用户的角色和权限。以下是一个简单的示例：

// 验证用户是否登录
function isLoggedIn() {
  const token = localStorage.getItem('token');
  return token !== null;
}

// 验证用户是否具有所需的权限
function hasPermissions(permissions) {
  const userPermissions = getUserPermissions(); // 从API或其他地方获取用户权限

  return permissions.every((permission) => userPermissions.includes(permission));
}

Salin selepas log masuk

在这个示例中，我们使用isLoggedIn函数来检查用户是否已登录。通常情况下，我们会从服务器获得一个令牌，并将其存储在本地存储中。如果用户已登录，我们可以执行获取用户权限的逻辑，并使用hasPermissions函数来验证用户是否具有所需的权限。

在组件中使用权限管理和访问控制
现在，我们已经设置好了路由和权限验证逻辑，接下来就是在Vue组件中使用它们。

以下是一个简单的示例：

export default {
  name: 'UsersList',
  computed: {
    canEditUsers() {
      return hasPermissions([PERMISSION_EDIT_USERS]);
    },
    canDeleteUsers() {
      return hasPermissions([PERMISSION_DELETE_USERS]);
    },
  },
};

Salin selepas log masuk

在上面的示例中，我们定义了一个名为UsersList的组件，并使用computed

Untuk melaksanakan kawalan akses dan pengurusan kebenaran, kami perlu menulis beberapa logik untuk mengesahkan peranan dan kebenaran pengguna. Berikut ialah contoh mudah:

Dalam contoh ini, kami menggunakan fungsi isLoggedIn untuk menyemak sama ada pengguna telah log masuk. Biasanya kami mendapat token daripada pelayan dan menyimpannya dalam storan tempatan. Jika pengguna log masuk, kami boleh melaksanakan logik untuk mendapatkan kebenaran pengguna dan menggunakan fungsi hasPermissions untuk mengesahkan bahawa pengguna mempunyai kebenaran yang diperlukan.

UsersList

computed

Atas ialah kandungan terperinci Cara menggunakan Vue untuk pengurusan kebenaran dan kawalan akses. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!