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路由權限的詳細介紹。我們從基本路由權限實現、動態路由權限實現、路由和組件的權限控制等多個方面對路由權限做了詳細的闡述。通過對路由權限的認識和實現，可以使前端頁面跳轉更加安全，同時可以有效地保護系統的安全性。