快捷導(dǎo)航

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

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

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

1. 前置知識

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

Vue 3
TypeScript
Vue Router

2. 實現(xiàn)思路

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

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

3. 具體實現(xiàn)

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

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

首先，我們需要創(chuàng)建一個全局路由守衛(wèi)來判斷該路由是否需要進行權(quán)限驗證。在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) {
      // 跳轉(zhuǎn)到登錄頁
      next('/login');
      return;
    }

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

  next();
});

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

3.2 添加路由元信息

接下來，在路由配置中添加meta字段來標(biāo)記該路由需要進行權(quán)限驗證，以及該路由所需的權(quán)限信息。在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字段來定義該路由需要進行權(quán)限驗證，以及該路由所需的權(quán)限信息。

3.3 創(chuàng)建權(quán)限驗證函數(shù)

接下來，我們需要創(chuàng)建一個權(quán)限驗證函數(shù)來判斷當(dāng)前用戶是否有權(quán)限訪問該路由。在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 }) {
      // 調(diào)用后端API獲取當(dāng)前用戶的角色信息
      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來調(diào)用后端API獲取當(dāng)前用戶的角色信息，并將該信息保存到Vuex狀態(tài)管理中。

3.4 調(diào)用權(quán)限驗證函數(shù)

最后，在路由守衛(wèi)中調(diào)用權(quán)限驗證函數(shù)，并根據(jù)驗證結(jié)果進行相應(yīng)的操作。在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) {
      // 跳轉(zhuǎn)到登錄頁
      next('/login');
      return;
    }

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

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

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

  next();
});

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