Vue3+TS實現動態(tài)路由權限的示例詳解

更新時間：2024年01月18日 15:41:01 作者：BUG高級開發(fā)工程師

當我們在開發(fā)一個大型的前端應用時,動態(tài)路由權限是一個必不可少的功能,本文將介紹如何使用Vue 3和TypeScript來實現動態(tài)路由權限,希望對大家有所幫助

1. 前置知識

在開始之前，你需要對以下知識有基本的了解：

Vue 3
TypeScript
Vue Router

2. 實現思路

動態(tài)路由權限的實現思路可以分為以下幾個步驟：

創(chuàng)建一個路由守衛(wèi)，在進入路由之前判斷該路由是否需要進行權限驗證。
在路由配置中添加meta字段來標記該路由需要進行權限驗證，以及該路由所需的權限信息。
創(chuàng)建一個權限驗證函數，根據當前用戶的角色和路由的權限信息來判斷是否有權限訪問該路由。
在權限驗證函數中調用后端API獲取當前用戶的角色信息，并將該信息保存到Vuex狀態(tài)管理中。
在路由守衛(wèi)中調用權限驗證函數，并根據驗證結果進行相應的操作，例如跳轉到登錄頁或顯示無權訪問提示。

3. 具體實現

下面將具體介紹如何使用Vue 3和TypeScript來實現動態(tài)路由權限。

3.1 創(chuàng)建路由守衛(wèi)

首先，我們需要創(chuàng)建一個全局路由守衛(wèi)來判斷該路由是否需要進行權限驗證。在router/index.ts中添加以下代碼：

import { router } from './index';
import store from '../store';

router.beforeEach((to, from, next) => {
  if (to.matched.some(record => record.meta.requiresAuth)) {
    const hasToken = store.getters['auth/hasToken'];
    if (!hasToken) {
      // 跳轉到登錄頁
      next('/login');
      return;
    }

    const requiredRoles = to.meta.roles;
    const userRole = store.getters['user/role'];
    if (!requiredRoles.includes(userRole)) {
      // 顯示無權訪問提示
      next('/403');
      return;
    }
  }

  next();
});

在上面的代碼中，我們首先判斷該路由是否需要進行權限驗證，如果需要，則判斷當前用戶是否有token，如果沒有則跳轉到登錄頁；然后根據當前用戶的角色和路由所需的權限信息來判斷是否有權限訪問該路由，如果沒有則顯示無權訪問提示。

3.2 添加路由元信息

接下來，在路由配置中添加meta字段來標記該路由需要進行權限驗證，以及該路由所需的權限信息。在router/index.ts中添加以下代碼：

import { createRouter, createWebHistory, RouteRecordRaw } from 'vue-router';

const routes: RouteRecordRaw[] = [
  {
    path: '/login',
    name: 'Login',
    component: () => import('../views/Login.vue'),
  },
  {
    path: '/',
    name: 'Home',
    component: () => import('../views/Home.vue'),
    meta: {
      requiresAuth: true,
      roles: ['admin', 'editor'],
    },
  },
  {
    path: '/about',
    name: 'About',
    component: () => import('../views/About.vue'),
    meta: {
      requiresAuth: true,
      roles: ['admin'],
    },
  },
  // ...
];

export const router = createRouter({
  history: createWebHistory(),
  routes,
});

在上面的代碼中，我們在路由配置中添加了meta字段來定義該路由需要進行權限驗證，以及該路由所需的權限信息。

3.3 創(chuàng)建權限驗證函數

接下來，我們需要創(chuàng)建一個權限驗證函數來判斷當前用戶是否有權限訪問該路由。在store/modules/user.ts中添加以下代碼：

import { Module } from 'vuex';
import { RootState } from '../index';

interface UserState {
  id: number;
  role: string;
}

const userModule: Module<UserState, RootState> = {
  namespaced: true,
  state: {
    id: 0,
    role: '',
  },
  getters: {
    role(state): string {
      return state.role;
    },
  },
  mutations: {
    setId(state, id: number) {
      state.id = id;
    },
    setRole(state, role: string) {
      state.role = role;
    },
  },
  actions: {
    async fetchUser({ commit }) {
      // 調用后端API獲取當前用戶的角色信息
      const response = await fetch('/api/user');
      const data = await response.json();

      commit('setId', data.id);
      commit('setRole', data.role);
    },
  },
};

export default userModule;

export type { UserState };

在上面的代碼中，我們首先定義了一個UserState接口來描述用戶狀態(tài)；然后在userModule中定義了一個fetchUser異步action來調用后端API獲取當前用戶的角色信息，并將該信息保存到Vuex狀態(tài)管理中。

3.4 調用權限驗證函數

最后，在路由守衛(wèi)中調用權限驗證函數，并根據驗證結果進行相應的操作。在router/index.ts中添加以下代碼：

import { router } from './index';
import store from '../store';

router.beforeEach(async (to, from, next) => {
  if (to.matched.some(record => record.meta.requiresAuth)) {
    const hasToken = store.getters['auth/hasToken'];
    if (!hasToken) {
      // 跳轉到登錄頁
      next('/login');
      return;
    }

    const requiredRoles = to.meta.roles;
    const userRole = store.getters['user/role'];

    if (!userRole) {
      // 獲取當前用戶的角色信息
      await store.dispatch('user/fetchUser');
    }

    if (!requiredRoles.includes(userRole)) {
      // 顯示無權訪問提示
      next('/403');
      return;
    }
  }

  next();
});

在上面的代碼中，我們首先判斷該路由是否需要進行權限驗證，如果需要，則判斷當前用戶是否有token，如果沒有則跳轉到登錄頁；然后根據當前用戶的角色和路由所需的權限信息來判斷是否有權限訪問該路由，如果沒有則顯示無權訪問提示。在第一次訪問需要權限驗證的路由時，我們會調用fetchUser異步action來獲取當前用戶的角色信息，并將該信息保存到Vuex狀態(tài)管理中。