當(dāng)我們?cè)陂_(kāi)發(fā)一個(gè)大型的前端應(yīng)用時(shí)，動(dòng)態(tài)路由權(quán)限是一個(gè)必不可少的功能。本文將介紹如何使用Vue 3和TypeScript來(lái)實(shí)現(xiàn)動(dòng)態(tài)路由權(quán)限，并且保持性能最佳。

1. 前置知識(shí)

在開(kāi)始之前，你需要對(duì)以下知識(shí)有基本的了解：

• Vue 3
• TypeScript
• Vue Router

2. 實(shí)現(xiàn)思路

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

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

3. 具體實(shí)現(xiàn)

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

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

首先，我們需要?jiǎng)?chuàng)建一個(gè)全局路由守衛(wèi)來(lái)判斷該路由是否需要進(jìn)行權(quán)限驗(yà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)到登錄頁(yè)
      next('/login');
      return;
    }

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

  next();
});

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

3.2 添加路由元信息

接下來(lái)，在路由配置中添加meta字段來(lái)標(biāo)記該路由需要進(jìn)行權(quán)限驗(yà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,
});

在上面的代碼中，我們?cè)诼酚膳渲弥刑砑恿?code>meta字段來(lái)定義該路由需要進(jìn)行權(quán)限驗(yàn)證，以及該路由所需的權(quán)限信息。

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

接下來(lái)，我們需要?jiǎng)?chuàng)建一個(gè)權(quán)限驗(yàn)證函數(shù)來(lái)判斷當(dāng)前用戶是否有權(quán)限訪問(wè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 };

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

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

最后，在路由守衛(wèi)中調(diào)用權(quán)限驗(yàn)證函數(shù)，并根據(jù)驗(yàn)證結(jié)果進(jìn)行相應(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)到登錄頁(yè)
      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)) {
      // 顯示無(wú)權(quán)訪問(wèn)提示
      next('/403');
      return;
    }
  }

  next();
});

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

4. 性能優(yōu)化

為了保持性能最佳，我們可以使用以下方法對(duì)動(dòng)態(tài)路由權(quán)限進(jìn)行優(yōu)化：

• 緩存用戶信息：在用戶登錄后，我們可以將當(dāng)前用戶的角色信息緩存在本地存儲(chǔ)或cookie中，以減少不必要的API調(diào)用。
• 懶加載路由：在路由配置中使用懶加載動(dòng)態(tài)加載路由組件，以減少初始加載時(shí)間和減輕頁(yè)面負(fù)擔(dān)。
• 使用路由緩存：在需要進(jìn)行權(quán)限驗(yàn)證的路由組件中使用路由緩存，以減少組件的重復(fù)渲染和提高頁(yè)面響應(yīng)速度。

到此這篇關(guān)于Vue3+TS實(shí)現(xiàn)動(dòng)態(tài)路由權(quán)限的示例詳解的文章就介紹到這了,更多相關(guān)Vue3動(dòng)態(tài)路由權(quán)限內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評(píng)論