【前端知识】简单易懂的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入门