Cara melaksanakan pengesahan dan kebenaran pengguna dalam projek Vue

Cara melaksanakan pengesahan dan kebenaran pengguna dalam projek Vue

Dalam beberapa tahun kebelakangan ini, rangka kerja bahagian hadapan Vue secara beransur-ansur menjadi pilihan arus perdana untuk pembangunan web. Apabila membangunkan projek Vue, pengesahan dan kebenaran pengguna adalah fungsi yang sangat diperlukan. Artikel ini akan memperkenalkan secara terperinci cara melaksanakan pengesahan dan kebenaran pengguna dalam projek Vue dari perspektif pelaksanaan teknikal dan memberikan contoh kod khusus.

1. Pengesahan pengguna

Pengesahan pengguna merujuk kepada proses pengesahan identiti pengguna untuk memastikan pengguna mendapat kebenaran undang-undang untuk mengakses sistem. Kaedah pengesahan pengguna biasa termasuk pengesahan nama pengguna dan kata laluan, log masuk pihak ketiga, dsb. Berikut mengambil pengesahan nama pengguna dan kata laluan sebagai contoh untuk memperkenalkan pelaksanaan pengesahan pengguna dalam projek Vue.

1. Buat komponen halaman log masuk

Dalam projek Vue, anda perlu mencipta komponen halaman log masuk terlebih dahulu. Komponen ini mengandungi kotak input untuk nama pengguna dan kata laluan dan butang log masuk. Apabila pengguna mengklik butang log masuk, pengesahan dilakukan dengan memanggil API bahagian belakang.

Kod sampel adalah seperti berikut:

<template>
  <div>
    <input v-model="username" placeholder="请输入用户名" />
    <input v-model="password" placeholder="请输入密码" type="password" />
    <button @click="login">登录</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      username: '',
      password: '',
    };
  },
  methods: {
    login() {
      // 调用登录API，验证用户名和密码
      // 如果验证成功，将用户信息存储到本地或会话存储中
    },
  },
};
</script>

2. Sahkan nama pengguna dan kata laluan

Dalam kaedah log masuk, hubungi API bahagian belakang untuk mengesahkan ketepatan nama pengguna dan kata laluan. Jika pengesahan berjaya, maklumat pengguna boleh disimpan ke storan tempatan atau storan sesi untuk memudahkan akses dan kawalan kebenaran berikutnya.

Kod sampel adalah seperti berikut:

methods: {
  login() {
    // 调用登录API，验证用户名和密码的正确性
    api.login(this.username, this.password)
      .then(response => {
        const { token, userInfo } = response.data;
        // 将token和用户信息存储到本地存储或会话存储中
        localStorage.setItem('token', token);
        localStorage.setItem('userInfo', JSON.stringify(userInfo));
        // 跳转到主页或其他需要认证的页面
        this.$router.push('/home');
      })
      .catch(error => {
        console.error('登录失败', error);
      });
  },
},

3. Strategi pengesahan

Selepas pengesahan pengguna, pengesahan biasanya diperlukan dalam setiap halaman yang memerlukan kebenaran. Anda boleh menentukan sama ada pengguna mempunyai kebenaran untuk mengakses halaman dengan menyemak maklumat pengguna dalam storan tempatan atau storan sesi.

Kod sampel adalah seperti berikut:

beforeRouteEnter(to, from, next) {
  // 检查本地存储或会话存储中是否存在用户信息
  const userInfo = localStorage.getItem('userInfo');
  if (userInfo) {
    next();
  } else {
    // 用户未登录，跳转到登录页面
    next('/login');
  }
},

2. Kebenaran pengguna

Kebenaran pengguna merujuk kepada menentukan hak akses pengguna kepada sumber sistem. Dalam projek Vue, pengurusan kebenaran pengguna boleh dicapai melalui mekanisme pengawal penghalaan. Yang berikut menggunakan pengawal penghalaan sebagai contoh untuk memperkenalkan pelaksanaan kebenaran pengguna dalam projek Vue.

1. Tentukan jadual penghalaan

Dalam projek Vue, tentukan jadual penghalaan, termasuk halaman yang memerlukan kawalan kebenaran.

Kod sampel adalah seperti berikut:

const routes = [
  {
    path: '/home',
    component: Home,
    // 需要进行权限控制的页面，在路由元信息中定义所需的角色
    meta: { requiresAuth: true, roles: ['admin', 'user'] },
  },
  // 其他路由...
];

2. Lakukan kebenaran dalam pengawal penghalaan

Gunakan pengawal navigasi Vue sebelumSetiap untuk membuat pertimbangan kebenaran sebelum lompatan penghalaan. Tentukan sama ada pengguna mempunyai kebenaran untuk mengakses halaman berdasarkan maklumat peranan yang ditakrifkan dalam maklumat pengguna dan maklumat meta penghalaan.

Kod sampel adalah seperti berikut:

router.beforeEach((to, from, next) => {
  const requiresAuth = to.matched.some(record => record.meta.requiresAuth);
  if (requiresAuth) {
    // 检查本地存储或会话存储中是否存在用户信息
    const userInfo = localStorage.getItem('userInfo');
    if (userInfo) {
      const { roles } = JSON.parse(userInfo);
      const requiredRoles = to.meta.roles;
      if (roles.some(role => requiredRoles.includes(role))) {
        // 用户具有访问页面的权限
        next();
      } else {
        // 用户权限不足，跳转到无权限页面
        next('/denied');
      }
    } else {
      // 用户未登录，跳转到登录页面
      next('/login');
    }
  } else {
    // 公开页面，无需授权
    next();
  }
});

Melalui contoh kod di atas, kami boleh melaksanakan fungsi pengesahan dan kebenaran pengguna dalam projek Vue. Pengesahan pengguna memastikan identiti sah pengguna dengan mengesahkan nama pengguna, kata laluan dan maklumat lain. Keizinan pengguna menggunakan mekanisme pengawal laluan untuk menentukan sama ada pengguna mempunyai kuasa untuk mengakses halaman sebelum laluan melompat. Pelaksanaan fungsi ini boleh membantu kami membina projek Vue yang selamat dan boleh dipercayai.

Atas ialah kandungan terperinci Cara melaksanakan pengesahan dan kebenaran pengguna dalam projek Vue. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!