Vue 中如何實現權限控制與路由守衛？

Vue 中如何實現權限控制和路由守衛？

作為一個優秀的前端框架，Vue 提供了許多方便的功能來幫助我們建立應用程式。其中，路由和權限控制是不可或缺的一部分。在開發中，我們經常需要對頁面進行限制，只允許特定的使用者或權限可見。這時，Vue 的路由守衛和權限控制功能派上用場。

一、權限控制

Vue 透過路由配置的 meta 屬性來實現權限控制。可以這麼做：

1. 新增路由 meta 屬性

可以在路由的 meta 屬性中加入權限控制，以決定存取該頁面是否有權限。

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

2. 編寫路由守衛

Vue 利用路由守衛來保護頁面不被非法存取。可以在路由中新增鉤子函數 beforeEnter，在進入該頁面前判斷是否有存取權限。

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();
        }
      }
    }
  ]
})

注意，store.getters.isLoggedIn 是 Vuex 中定義的一個 getter 函數，負責判斷使用者是否已經登入。

二、路由守衛

利用 Vue 的路由守衛，當路由跳轉時能夠攔截用戶，對用戶的存取進行處理。

1. 全域路由守衛

全域路由守衛在任何路由跳轉時都會觸發，可以用來處理登入狀態、使用者資訊等全域的資料。

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. 路由獨享守衛

路由獨享守衛在目前路由配置中設置，可以對某些路由單獨進行攔截處理。

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

在 beforeEnter 鉤子函數中判斷使用者權限是否足夠，如果不足夠則跳到登入頁面。

總結

在 Vue 中實作權限控制和路由守衛是一個很方便的過程。透過設定路由的 meta 屬性和利用路由守衛，我們可以根據使用者的登入狀態和權限來控制存取頁面。這樣不僅可以保障應用程式的安全性，也能提高使用者體驗。

以上是Vue 中如何實現權限控制與路由守衛？的詳細內容。更多資訊請關注PHP中文網其他相關文章！