Vue-Router: Bagaimana untuk menggunakan pengawal laluan untuk melindungi laluan?

Vue-Router: Bagaimana untuk menggunakan pengawal laluan untuk melindungi laluan?

Dalam pembangunan Vue.js, Vue-Router ialah alat penting untuk pengurusan penghalaan bahagian hadapan. Selain membolehkan kami melaksanakan lompatan dan peralihan halaman dengan mudah, Vue-Router juga menyediakan mekanisme pengawal laluan yang membolehkan kami melakukan beberapa operasi tersuai sebelum dan selepas lompatan laluan, seperti pengesahan dan pengalihan semula.

Untuk lebih memahami penggunaan pengawal laluan, kami akan memperkenalkannya dalam tiga bahagian: pengawal global, pengawal eksklusif laluan dan pengawal dalam komponen.

1. Global guard

Global guard ialah pengawal yang akan dilaksanakan sebelum dan selepas setiap lompatan laluan dalam keseluruhan aplikasi Kami boleh mendaftarkannya melalui kaedah yang disediakan oleh Vue-Router. Terdapat tiga kaedah pengawal global, iaitu beforeEach, beforeResolve dan afterEach. beforeEach、beforeResolve和afterEach。

在main.js文件中，我们可以通过如下代码进行注册：

import router from './router'

router.beforeEach((to, from, next) => {
  // 这里是你的自定义逻辑
  if (to.meta.requiresAuth && !isAuthenticated()) {
    next('/login') // 重定向到登录页
  } else {
    next()
  }
})

router.beforeResolve((to, from, next) => {
  // 这里是你的自定义逻辑
  next()
})

router.afterEach(() => {
  // 这里是你的自定义逻辑
})

在beforeEach方法中，我们可以根据实际情况进行鉴权判断，如果用户未登录且目标路由需要登录权限，我们可以通过next('/login')将用户重定向到登录页。

beforeResolve方法在路由解析完毕后被调用，可以在该方法中执行一些异步操作。

afterEach方法在路由跳转完成后被调用，可以用于执行一些全局的清理操作。

2. 路由独享守卫

路由独享守卫是针对某个具体路由进行的配置，只有在该路由中才会被起作用。我们可以在路由配置中使用beforeEnter属性来进行注册。

{
  path: '/admin',
  component: Admin,
  beforeEnter: (to, from, next) => {
    // 这里是你的自定义逻辑
    if (!isAdmin()) {
      next('/access-denied') // 重定向到访问拒绝页
    } else {
      next()
    }
  }
}

在路由独享守卫中，我们可以根据实际需求进行逻辑判断，例如检查用户是否有管理员权限，如果没有，则重定向到访问拒绝页。

3. 组件内守卫

除了全局守卫和路由独享守卫外，Vue-Router还提供了组件内的守卫，用于在组件内部进行路由跳转的操作。组件内的守卫包括beforeRouteEnter、beforeRouteUpdate和beforeRouteLeave

Dalam fail main.js, kami boleh mendaftar melalui kod berikut:

export default {
  beforeRouteEnter (to, from, next) {
    // 这里是你的自定义逻辑
    if (!isAuthenticated()) {
      next('/login') // 重定向到登录页
    } else {
      next()
    }
  },
  beforeRouteUpdate (to, from, next) {
    // 这里是你的自定义逻辑
    next()
  },
  beforeRouteLeave (to, from, next) {
    // 这里是你的自定义逻辑
    next()
  }
}

Dalam kaedah beforeEach, kami boleh membuat pertimbangan pengesahan berdasarkan situasi sebenar Jika pengguna tidak log masuk dan laluan sasaran memerlukan Untuk kebenaran log masuk, kami boleh mengubah hala pengguna ke halaman log masuk melalui next('/login').

Kaedah beforeResolve dipanggil selepas laluan diselesaikan dan beberapa operasi tak segerak boleh dilakukan dalam kaedah ini.

Kaedah afterEach dipanggil selepas lompatan laluan selesai dan boleh digunakan untuk melakukan beberapa operasi pembersihan global. 🎜

🎜Pengawal eksklusif laluan🎜🎜🎜Pengadang eksklusif laluan dikonfigurasikan untuk laluan tertentu dan hanya akan berkuat kuasa di laluan itu. Kita boleh menggunakan atribut beforeEnter dalam konfigurasi penghalaan untuk mendaftar. 🎜rrreee🎜Dalam pengawal eksklusif penghalaan, kami boleh membuat pertimbangan logik berdasarkan keperluan sebenar, seperti menyemak sama ada pengguna mempunyai hak pentadbir, dan jika tidak, mengubah hala ke halaman penafian akses. 🎜
🎜Pengadang dalam komponen🎜🎜🎜Selain pengawal global dan pengawal eksklusif laluan, Vue-Router juga menyediakan pengawal intra-komponen untuk menghalakan operasi lompatan dalam komponen. Pengawal dalam komponen termasuk beforeRouteEnter, beforeRouteUpdate dan beforeRouteLeave. 🎜rrreee🎜Di dalam pengawal di dalam komponen, kami boleh melakukan beberapa operasi tersuai mengikut keperluan sebenar, seperti menyemak sama ada pengguna telah log masuk, dan jika tidak, mengubah hala ke halaman log masuk. 🎜🎜Ringkasan: 🎜🎜Melalui tiga kaedah di atas, kami boleh menggunakan pengawal laluan untuk melindungi laluan dan melaksanakan beberapa operasi tersuai, seperti pengesahan, pengalihan, dsb. Bergantung pada keperluan, kami boleh memilih jenis pengawal yang sesuai untuk konfigurasi bagi mencapai pengurusan penghalaan yang lebih fleksibel dan boleh diselenggara. Dalam pembangunan sebenar, kami boleh menggunakan pengawal ini secara munasabah mengikut keperluan khusus dan senario perniagaan untuk meningkatkan keselamatan aplikasi dan pengalaman pengguna. 🎜

Atas ialah kandungan terperinci Vue-Router: Bagaimana untuk menggunakan pengawal laluan untuk melindungi laluan?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!