Vue2 前端權限控制實戰
作者：天藍色的魚
本文將介紹如何使用 Vue2 實現前端權限控制，包括頁面路由權限控制和按鈕級別的權限控制。
在Vue2項目中，前端權限控制是保障應用安全性的重要環節。本文將介紹如何使用Vue2實現前端權限控制，包括頁面路由權限控制和按鈕級別的權限控制。
一、頁面路由權限控制
頁面路由權限控制主要是根據用戶的角色或權限來決定其可以訪問哪些頁面。在Vue2中，我們可以結合Vue Router來實現這一功能。
1. 定義路由和權限
首先，在Vue Router中定義所有的路由，并為每個路由配置一個meta字段，用于標注該路由所需的權限。
import Vue from 'vue';
import Router from 'vue-router';
Vue.use(Router);
const router = new Router({
routes: [
{
path: '/dashboard',
component: Dashboard,
meta: { requiresAuth: true, roles: ['admin'] }, // 需要認證，且角色為admin
},
// ...其他路由
],
});2. 使用導航守衛進行權限檢查
接下來，我們可以使用Vue Router的導航守衛功能來進行權限檢查。在全局前置守衛beforeEach中，根據用戶的角色和路由的meta字段來決定是否允許訪問。
router.beforeEach((to, from, next) => {
const userRoles = store.getters.roles; // 假設從Vuex store中獲取用戶角色
if (to.matched.some(record => record.meta.requiresAuth)) {
// 檢查是否需要認證
if (!store.getters.isAuthenticated) {
// 用戶未登錄，重定向到登錄頁
next('/login');
} else if (to.matched.some(record => record.meta.roles)) {
// 檢查用戶角色是否滿足路由要求
const hasRole = to.matched.some(record => {
return record.meta.roles.some(role => userRoles.includes(role));
});
if (hasRole) {
next(); // 角色滿足，允許訪問
} else {
next('/forbidden'); // 角色不滿足，重定向到無權限頁面
}
} else {
next(); // 不需要特定角色，允許訪問
}
} else {
next(); // 路由不需要認證，允許訪問
}
});請注意，上述代碼中的store.getters.roles和store.getters.isAuthenticated是假設你已經使用Vuex來管理用戶狀態和角色信息。你需要根據實際情況來獲取這些信息。
二、按鈕級別的權限控制
除了頁面路由權限控制外，我們還需要實現按鈕級別的權限控制，以細粒度地控制用戶操作。這可以通過自定義指令或組件來實現。
1. 自定義指令實現按鈕權限控制
我們可以創建一個自定義指令v-permission，用于控制按鈕的顯示和隱藏。
Vue.directive('permission', {
inserted: function (el, binding, vnode) {
const { value } = binding; // 獲取指令的值，即所需的權限
const userRoles = vnode.context.$store.getters.roles; // 從Vuex store中獲取用戶角色
if (value && value instanceof Array && !value.some(role => userRoles.includes(role))) {
el.parentNode && el.parentNode.removeChild(el); // 如果用戶沒有權限，則移除按鈕元素
}
},
});在模板中使用自定義指令：
<button v-permission="['admin']">只有管理員可見的按鈕</button>2. 組件內實現按鈕權限控制
另一種方法是在組件內部使用計算屬性或方法來控制按鈕的顯示和隱藏。
<template>
<div>
<button v-if="isButtonVisible">需要權限的按鈕</button>
</div>
</template>
<script>
export default {
computed: {
isButtonVisible() {
const userRoles = this.$store.getters.roles; // 從Vuex store中獲取用戶角色
return userRoles.includes('admin'); // 根據用戶角色來決定按鈕是否可見
},
},
};
</script>這種方法更加靈活，可以根據組件內部的邏輯來決定按鈕的顯示和隱藏。你可以根據實際需求選擇合適的方法來實現按鈕級別的權限控制。
總結
通過結合Vue Router的導航守衛和自定義指令或組件內部邏輯，我們可以實現Vue2項目中的前端權限控制，包括頁面路由權限控制和按鈕級別的權限控制。在實際項目中，你還需要根據具體需求和場景來調整和完善這些方案，并確保與后端權限驗證的協同工作，共同構建安全可靠的Web應用。
責任編輯：趙寧寧
來源：
前端歷險記
