Bagaimana untuk melaksanakan kawalan kebenaran dan pengawal penghalaan dalam Vue?

Bagaimana untuk melaksanakan kawalan kebenaran dan pengawal penghalaan dalam Vue?

Sebagai rangka kerja bahagian hadapan yang sangat baik, Vue menyediakan banyak fungsi yang mudah untuk membantu kami membina aplikasi. Antaranya, penghalaan dan kawalan kebenaran adalah bahagian yang sangat diperlukan. Dalam pembangunan, kami selalunya perlu mengehadkan halaman untuk hanya membenarkan pengguna atau kebenaran tertentu kelihatan. Pada masa ini, pengawal penghalaan Vue dan fungsi kawalan kebenaran berguna.

1. Kawalan kebenaran

Vue melaksanakan kawalan kebenaran melalui atribut meta konfigurasi penghalaan. Anda boleh melakukan ini:

1. Tambah atribut meta laluan

Anda boleh menambah kawalan kebenaran pada atribut meta laluan untuk menentukan sama ada anda mempunyai kebenaran untuk mengakses halaman.

{
  path: '/dashboard',
  name: 'Dashboard',
  component: Dashboard,
  meta: {
    requiresAuth: true
  }
}

2. Tulis pengawal penghalaan

Vue menggunakan pengawal penghalaan untuk melindungi halaman daripada akses haram. Anda boleh menambah fungsi cangkuk sebelumMasuk dalam laluan untuk menentukan sama ada anda mempunyai kebenaran akses sebelum memasuki halaman.

const router = new VueRouter({
  routes: [
    {
      path: '/dashboard',
      name: 'Dashboard',
      component: Dashboard,
      meta: {
        requiresAuth: true
      },
      beforeEnter: (to, from, next) => {
        if (!store.getters.isLoggedIn) {
          next('/login');
        } else {
          next();
        }
      }
    }
  ]
})

Perhatikan bahawa store.getters.isLoggedIn ialah fungsi getter yang ditakrifkan dalam Vuex, yang bertanggungjawab untuk menentukan sama ada pengguna telah log masuk.

2. Pengawal laluan

Menggunakan pengawal laluan Vue, ia boleh memintas pengguna apabila laluan melompat dan memproses akses pengguna.

1. Pengawal laluan global

Pengawal laluan global akan dicetuskan apabila mana-mana laluan melompat, dan boleh digunakan untuk memproses data global seperti status log masuk dan maklumat pengguna.

router.beforeEach((to, from, next) => {
  // 判断用户是否登录
  if (to.matched.some(record => record.meta.requiresAuth)) {
    if (!store.getters.isLoggedIn) {
      next({
        path: '/login',
        query: { redirect: to.fullPath }
      })
    } else {
      next()
    }
  } else {
    next()
  }
})

2. Pengawal eksklusif laluan

Pengadang eksklusif laluan ditetapkan dalam konfigurasi penghalaan semasa dan boleh memintas laluan tertentu secara individu.

{
  path: '/dashboard',
  name: 'Dashboard',
  component: Dashboard,
  beforeEnter: (to, from, next) => {
    // 判断用户权限
    if (store.getters.getPermission === ‘admin’) {
      next()
    } else {
      next({
        path: '/login',
        query: { redirect: to.fullPath }
      })
    }
  }
}

Dalam fungsi cangkuk beforeEnter, tentukan sama ada kebenaran pengguna mencukupi Jika tidak, lompat ke halaman log masuk.

Ringkasan

Melaksanakan kawalan kebenaran dan pengawal penghalaan dalam Vue ialah proses yang sangat mudah. Dengan menetapkan atribut meta laluan dan menggunakan pengawal laluan, kami boleh mengawal akses kepada halaman berdasarkan status log masuk dan kebenaran pengguna. Ini bukan sahaja memastikan keselamatan aplikasi, tetapi juga meningkatkan pengalaman pengguna.

Atas ialah kandungan terperinci Bagaimana untuk melaksanakan kawalan kebenaran dan pengawal penghalaan dalam Vue?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!