【前端知识】简单易懂的vue前端页面元素权限控制

在前端实现基于 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入门