Vue 路由許可權詳解

一、路由許可權介紹

路由許可權是指在前端頁面路由跳轉時，根據用戶身份或許可權等級來決定允許或拒絕用戶訪問某一頁面或某一個路由的設置。這種做法主要是為了保護某些敏感信息或操作，確保系統的安全性。在大型系統中，路由許可權成為不可或缺的一部分。

二、基本的路由許可權實現

實現路由許可權的基本思路是在需要許可權控制的路由設置meta信息，通過路由守衛根據用戶角色或者許可權等級來判斷是否有權訪問該頁面或者路由。以下是一個簡單的示例：

const router = new VueRouter({
  mode: 'history',
  routes: [
    {
      path: '/',
      name: 'home',
      meta: {
        requiresAuth: true // 需要驗證登錄狀態
      }
    },
    {
      path: '/about',
      name: 'about',
      meta: {
        requiresAuth: true, // 需要驗證登錄狀態
        roles: ['admin'] // 需要管理員許可權
      }
    },
    {
      path: '/login',
      name: 'login'
    }
  ]
})

router.beforeEach((to, from, next) => {
  if (to.matched.some(record => record.meta.requiresAuth)) {
    if (!store.getters.isAuthenticated) {
      next({
        path: '/login',
        query: { redirect: to.fullPath }
      })
    } else if (to.matched.some(record => record.meta.roles)) {
      if (!store.getters.isAdmin) {
        next({ name: 'home' })
      } else {
        next()
      }
    } else {
      next()
    }
  } else {
    next()
  }
})

以上代碼中，我們在路由配置中添加了meta信息，如`requiresAuth`、`roles`等。在全局導航守衛中，我們判斷是否需要驗證登錄狀態和角色許可權，如果沒有登錄或者沒有相應角色許可權，就被跳轉到登錄頁面或者首頁，否則就繼續訪問。

三、動態路由許可權實現

在實際的業務場景中，經常會出現路由需要動態生成的情況。因此，在路由實現動態生成時，我們可以在前端將路由信息傳遞給後端，由後端根據用戶身份或者許可權等級來動態生成相應的路由，從而保證不同用戶可以訪問他們有許可權訪問的路由。

以下是一個動態路由許可權實現的示例：

const dynamicRoutes = [
  {
    path: '',
    component: Layout,
    children: [
      {
        path: 'dashboard',
        component: Dashboard,
        name: 'dashboard',
        meta: { requiresAuth: true, roles: ['admin', 'editor'] }
      }
    ]
  }
]

router.beforeEach((to, from, next) => {
  if (store.getters.roles.length === 0) {
    // 判斷當前用戶是否已經拉取完user_info信息
    store.dispatch('GetUserInfo').then(res => { // 拉取user_info
      const roles = res.roles
      store.dispatch('GenerateRoutes', { roles }).then(() => { // 根據roles許可權生成可訪問的路由表
        router.addRoutes(store.getters.addRouters) // 動態添加可訪問路由表
        next({ ...to, replace: true }) // hack方法，確保addRoutes已完成 ,set the replace: true so the navigation will not leave a history record
      })
    }).catch(() => {
      store.dispatch('FedLogOut').then(() => {
        Message.error('驗證失敗，請重新登錄')
        next({ path: '/login' })
      })
    })
  } else {
    // 沒有動態改變許可權的需求可直接next() 刪除下方許可權判斷 ↓
    if (hasPermission(store.getters.roles, to.meta.roles)) {
      next()//
    } else {
      next({ path: '/401', replace: true, query: { noGoBack: true }})
    }
  }
})

在以上代碼中，我們首先定義了一個動態路由表`dynamicRoutes`，在用戶登錄後，根據用戶的角色許可權動態生成相應的路由表，然後使用`router.addRoutes`動態添加路由。在用戶每次頁面跳轉之前會執行全局前置守衛，如果用戶沒有拉取過用戶信息，則調用API從後台獲取用戶信息，使用根據用戶許可權動態生成的路由表動態添加路由，然後執行跳轉。如果路由需要管理員或其他許可權，則根據用戶role在hasPermission中判斷是否有許可權，沒有則跳轉到401頁面。

四、路由和組件的許可權控制

在某些業務場景下，需要對組件內部的某些操作或某些內容進行許可權限制，例如系統管理員和普通用戶擁有的操作許可權不同，普通用戶無法進行刪除等操作。這時，我們可以在組件內部設置相應的許可權控制。

以下是一個組件內部的許可權控制示例：

<template>
  <div>
    <h1 v-if="hasPermission" ref="header">我是管理員</h1>
    <h1 v-else>我是普通用戶</h1>
    <button v-if="hasPermission" @click="delete">刪除</button>
  </div>
</template>

<script>
export default {
  data () {
    return {
      hasPermission: false
    }
  },
  created () {
    // 獲取用戶許可權信息，並根據許可權決定是否顯示或可操作
    const roles = this.$store.getters.roles
    if (roles.includes('admin')) {
      this.hasPermission = true
    }
  },
  methods: {
    delete () {
      // 點擊刪除按鈕的操作
    }
  }
}
</script>

在以上代碼中，我們在組件中定義了一個`hasPermission`的屬性，通過獲取用戶角色信息來判斷當前用戶是否是管理員，從而決定是否顯示或者可操作某些內容。例如`h1`標籤和`button`標籤分別根據是否是管理員來決定是否顯示。同時，在`delete`方法中，我們也可以根據用戶的角色來限制用戶的操作，例如只有管理員可以進行刪除操作。

五、總結

以上就是關於Vue路由許可權的詳細介紹。我們從基本路由許可權實現、動態路由許可權實現、路由和組件的許可權控制等多個方面對路由許可權做了詳細的闡述。通過對路由許可權的認識和實現，可以使前端頁面跳轉更加安全，同時可以有效地保護系統的安全性。