在前端實現基于 Vue 的權限控制，通常需要結合后端返回的用戶權限數據，動態控制頁面元素的顯示與隱藏、按鈕的可點擊狀態等。以下是設計思路和代碼實現：

設計思路

1. 權限數據管理:

   • 從后端獲取用戶的權限數據（如角色、權限列表等），并存儲在 Vuex 或組件的 data 中。
   • 權限數據可以是一個數組或對象，例如：

     {"roles": ["admin", "editor"],"permissions": ["create", "edit", "delete"]
     }
     

2. 權限判斷方法:

   • 封裝一個全局方法（如 checkPermission），用于判斷用戶是否具有某個權限。
   • 該方法可以放在 Vue 的原型上，方便全局調用。

3. 動態控制元素:

   • 使用 v-if 或 v-show 控制元素的顯示與隱藏。
   • 使用 :disabled 控制按鈕的可點擊狀態。

4. 路由權限控制:

   • 在路由守衛中檢查用戶權限，決定是否允許訪問某個頁面。

代碼實現

1. 權限數據管理

假設從后端獲取的權限數據如下：

{"roles": ["admin", "editor"],"permissions": ["create", "edit", "delete"]
}

將權限數據存儲在 Vuex 中：

// store/modules/auth.js
export default {state: {roles: [],permissions: []},mutations: {SET_PERMISSIONS(state, permissions) {state.permissions = permissions;},SET_ROLES(state, roles) {state.roles = roles;}},actions: {fetchUserPermissions({ commit }) {// 模擬從后端獲取權限數據const permissions = ["create", "edit", "delete"];const roles = ["admin", "editor"];commit("SET_PERMISSIONS", permissions);commit("SET_ROLES", roles);}}
};

2. 權限判斷方法

在 Vue 原型上添加一個全局方法 checkPermission：

// main.js
import Vue from 'vue';
import store from './store';Vue.prototype.$checkPermission = function (permission) {const permissions = store.state.auth.permissions;return permissions.includes(permission);
};

3. 動態控制元素

在組件中使用 v-if 或 v-show 控制元素的顯示與隱藏，使用 :disabled 控制按鈕的可點擊狀態。

<template><div><!-- 控制元素的顯示與隱藏 --><div v-if="$checkPermission('create')">創建內容</div><!-- 控制按鈕的可點擊狀態 --><button :disabled="!$checkPermission('edit')">編輯</button><!-- 使用 v-show 控制元素的顯示與隱藏 --><button v-show="$checkPermission('delete')">刪除</button></div>
</template><script>
export default {mounted() {// 獲取用戶權限數據this.$store.dispatch("auth/fetchUserPermissions");}
};
</script>

4. 路由權限控制

在路由守衛中檢查用戶權限，決定是否允許訪問某個頁面。

// router/index.js
import Vue from 'vue';
import Router from 'vue-router';
import store from './store';Vue.use(Router);const routes = [{path: '/admin',component: () => import('@/views/Admin.vue'),meta: { requiresAuth: true, requiredPermissions: ['admin'] }},{path: '/editor',component: () => import('@/views/Editor.vue'),meta: { requiresAuth: true, requiredPermissions: ['editor'] }}
];const router = new Router({routes
});router.beforeEach((to, from, next) => {const requiresAuth = to.matched.some(record => record.meta.requiresAuth);const requiredPermissions = to.meta.requiredPermissions || [];if (requiresAuth) {const userPermissions = store.state.auth.permissions;const hasPermission = requiredPermissions.every(permission =>userPermissions.includes(permission));if (!hasPermission) {next('/403'); // 無權限時跳轉到 403 頁面} else {next();}} else {next();}
});export default router;

5. 無權限頁面

創建一個無權限頁面（如 403.vue），用于提示用戶無權限訪問。

<template><div><h1>403 無權限訪問</h1><p>您沒有權限訪問此頁面。</p></div>
</template>

總結

通過以上設計思路和代碼實現，可以實現基于 Vue 的前端權限控制，包括：

1. 權限數據管理：從后端獲取權限數據并存儲在 Vuex 中。
2. 權限判斷方法：封裝全局方法 checkPermission，用于判斷用戶是否具有某個權限。
3. 動態控制元素：使用 v-if、v-show 和 :disabled 控制元素的顯示與隱藏、按鈕的可點擊狀態。
4. 路由權限控制：在路由守衛中檢查用戶權限，決定是否允許訪問某個頁面。

這種方法靈活且易于擴展，適用于大多數前端權限控制場景。

相關文獻

【前端知識】Javascript前端框架Vue入門