快捷導(dǎo)航

Vue實現(xiàn)不同用戶權(quán)限的方法詳解

更新時間：2025年03月25日 08:10:41 作者：幼兒園技術(shù)家

在項目中,實現(xiàn)不同用戶的權(quán)限控制是常見的需求也是常見的功能模塊,本文將以 vue 為主要的代碼框架介紹幾種常見的權(quán)限控制方式,有需要的可以了解下

在項目中，實現(xiàn)不同用戶的權(quán)限控制是常見的需求也是常見的功能模塊，例如管理系統(tǒng)中不同角色（管理員、普通用戶等）應(yīng)有不同的訪問權(quán)限，小程序、App等在不同角色登入的時候顯示的首頁以及跳轉(zhuǎn)訪問不同的頁面。本文將以 vue 為主要的代碼框架介紹幾種常見的權(quán)限控制方式。

1. 基于路由守衛(wèi)的權(quán)限控制

1.1 方案概述

基于 Vue Router 的 beforeEach 進行全局路由守衛(wèi)控制。我們可以在 vuex 或 pinia 中存儲用戶角色，并在路由的 meta 字段中定義允許訪問的角色。

1.2 實現(xiàn)步驟

在 router 配置中為每個路由添加 meta 字段，存儲允許訪問的角色。
在 Vuex/Pinia 中存儲用戶角色。
使用 router.beforeEach 進行權(quán)限校驗。

1.3 代碼示例

// router/index.js
import { createRouter, createWebHistory } from 'vue-router';
import store from '@/store';

// 引入多個組件頁面 
import Home from '@/views/Home.vue';
import Admin from '@/views/Admin.vue';
import AddSomeFun from '@/views/AddSomeFun.vue';
import Login from '@/views/Login.vue';

// 定義路由，并且在 meta 中定義可訪問的角色
const routes = [
  { path: '/', component: Home },
  { path: '/admin', component: Admin, meta: { roles: ['admin'] } },
  { path: '/addSomeFun', component: AddSomeFun, meta: { roles: ['user'] } },
  { path: '/login', component: Login }
];

// 創(chuàng)建路由
const router = createRouter({
  history: createWebHistory(),
  routes
});

// 路由校驗
router.beforeEach((to, from, next) => {
  const userRole = store.state.userRole; // 假設(shè) Vuex 中存儲了用戶 user、管理員 admin 角色
  if (to.meta.roles && !to.meta.roles.includes(userRole)) {
    next('/'); // 無權(quán)限跳轉(zhuǎn)到首頁
  } else {
    next();
  }
});

export default router;

2. 基于 Vue 指令的權(quán)限控制

2.1 方案概述

使用 Vue 指令 v-permission 來控制按鈕、組件或模塊的顯示隱藏。

2.2 實現(xiàn)步驟

在 Vue 全局創(chuàng)建一個自定義指令 v-permission。
在 main.js 引入注冊。
該指令根據(jù)用戶權(quán)限判斷是否顯示該元素。

2.3 代碼示例

// directives/permission.js
// 指令封裝
import { useStore } from 'vuex';

export default {
  install(app) {
    app.directive('permission', {
      mounted(el, binding) {
        const store = useStore();
        const userRole = store.state.userRole;
        if (!binding.value.includes(userRole)) {
          el.parentNode?.removeChild(el);
        }
      }
    });
  }
};

// main.js
import { createApp } from 'vue';
import App from './App.vue';
import store from './store';
import permissionDirective from './directives/permission';

const app = createApp(App);
app.use(store);
app.use(permissionDirective); // 注冊自定義指令
app.mount('#app');

<!-- 使用示例 -->
<button v-permission="['admin']">僅管理員可見</button>

3. 基于 Vuex（或 Pinia）的權(quán)限控制

3.1 方案概述

在 Vuex/Pinia 中存儲權(quán)限信息，并在組件中通過 computed 計算屬性動態(tài)控制組件或按鈕的顯示。

3.2 代碼示例

// store/index.js
import { createStore } from 'vuex';

export default createStore({
  state: {
    userRole: 'user' // 假設(shè)存儲用戶角色
  },
  mutations: {
    setUserRole(state, role) {
      state.userRole = role;
    }
  }
});

<!-- 在組件中使用 Vuex 進行權(quán)限判斷 -->
<template>
  <button v-if="userRole === 'admin'">僅管理員可見</button>
</template>

<script>
import { computed } from 'vue';
import { useStore } from 'vuex';

export default {
  setup() {
    const store = useStore();
    const userRole = computed(() => store.state.userRole);
    return { userRole };
  }
};
</script>

4. 后端返回權(quán)限控制

4.1 方案概述

后端返回權(quán)限控制的方式有兩種：

返回用戶權(quán)限信息：前端獲取角色信息后，使用前述方法進行權(quán)限控制。
后端返回可訪問路由：后端返回用戶可以訪問的路由列表，前端使用 router.addRoute 動態(tài)注冊。

4.2 代碼示例（后端返回路由）

// 登錄后獲取用戶權(quán)限，并動態(tài)添加路由
import router from '@/router';
import store from '@/store';
import axios from 'axios';

async function fetchUserRoutes() {
  const res = await axios.post('/common/getUserRoutes'); // 假設(shè)后端返回路由信息
  const routes = res.data
  
  routes.forEach(route => {
    router.addRoute(route);
  });
}

fetchUserRoutes();

5. 總結(jié)

方法	適用場景	優(yōu)勢	缺點
路由守衛(wèi)	頁面級權(quán)限控制	適用于完整頁面權(quán)限	無法控制按鈕等細(xì)節(jié)
Vue 指令	組件、按鈕級權(quán)限	適用于 UI 級別權(quán)限	需要手動移除元素
Vuex/Pinia	組件級權(quán)限	適用于靈活權(quán)限判斷	需要在多個組件中維護權(quán)限邏輯
后端返回權(quán)限	適用于大規(guī)模權(quán)限管理	后端統(tǒng)一管理，靈活	需要動態(tài)更新前端路由