在 Vue 项目中巧妙实现权限控制，打造贴心用户体验

2023-12-11 04:26:43

前言

权限控制在现代网络应用中至关重要，它确保只有授权用户才能访问特定功能或数据。在 Vue 项目中，权限控制可以分为两大类：页面级和元素级。页面级控制限制用户对整个页面的访问，而元素级控制则允许精细地控制单个元素的可见性和交互性。

页面级权限控制

实现页面级权限控制的第一步是获取当前用户的权限列表。这通常可以通过向服务端发起 API 请求来实现，返回的权限列表应与用户角色相关联。

// 获取权限列表
const permissions = await axios.get('/api/user/permissions');

获取权限列表后，我们可以使用路由守卫来限制对受保护页面的访问。路由守卫是一个特殊的钩子函数，它在导航到一个新路由之前被调用。我们可以利用这个机会检查用户是否具有访问该页面的权限。

// 路由守卫
router.beforeEach((to, from, next) => {
  const requiredPermissions = to.meta.permissions;
  if (requiredPermissions && !permissions.some(p => requiredPermissions.includes(p))) {
    next('/unauthorized');
  } else {
    next();
  }
});

元素级权限控制

对于元素级权限控制，我们可以使用动态指令。动态指令允许我们根据用户的权限动态地改变元素的行为。

// 动态指令
Vue.directive('has-permission', {
  bind(el, binding) {
    if (!permissions.some(p => binding.value.includes(p))) {
      el.style.display = 'none';
    }
  }
});

使用这个指令，我们可以轻松地控制元素的可见性：

<button v-has-permission="['edit', 'delete']">编辑</button>

Vuex 集成

为了在整个 Vue 应用中集中管理权限，我们可以使用 Vuex。Vuex 是一个状态管理库，允许我们在组件之间共享数据。我们可以将权限列表存储在 Vuex 状态中，并通过 getters 访问它。

// Vuex 模块
const permissionsModule = {
  state: {
    permissions: []
  },
  getters: {
    getPermissions(state) {
      return state.permissions;
    }
  }
};

示例代码

为了提供一个完整的示例，我们创建了一个简单的 Vue 项目，其中包含页面级和元素级权限控制。

<template>
  <div>
    <nav>
      <router-link to="/">首页</router-link>
      <router-link to="/admin">管理</router-link>
    </nav>
    <router-view></router-view>
  </div>
</template>

<script>
import { mapGetters } from 'vuex';
export default {
  computed: {
    ...mapGetters('permissions', ['getPermissions'])
  },
  created() {
    // 获取权限列表
    this.$store.dispatch('getPermissions');
  },
  beforeRouteEnter(to, from, next) {
    // 路由守卫
    const requiredPermissions = to.meta.permissions;
    if (requiredPermissions && !this.getPermissions.some(p => requiredPermissions.includes(p))) {
      next('/unauthorized');
    } else {
      next();
    }
  }
};
</script>