打造一个可维护、可复用的前端权限控制方案（含完整Demo）

摘要

在现代 Web 应用中，权限控制已经不再是"后端的事"。随着前后端分离、单页应用（SPA）流行，前端权限控制逐渐成为用户体验和系统安全的双重关键。如果只靠后端控制，前端体验太差；如果只靠前端控制，那就等于裸奔。怎么权衡？怎么落地？这就是本文要探讨的重点。

引言

你是否遇到过：不同用户登录后看到的菜单不同、某些按钮灰了点不了、访问一些页面会自动跳转 403 页面？这都来自于"前端权限控制"的精细化设计。

现在的权限控制越来越细粒度，除了"角色"之外，还有"操作级"控制。比如同一个页面里，有的人能"查看"，有的人能"新增"，还有人只能"导出"。

这一套看似简单，实则涉及：路由控制、组件控制、权限管理、后端验证、缓存同步等多个环节。我们接下来就一步步来拆解。

前端权限控制系统设计思路

用户登录后获取权限信息

后端返回用户的角色、权限码等信息，前端登录成功后将其缓存（如 Vuex、Pinia、localStorage 等）。

示例数据结构

js 复制代码

// 登录成功后后端返回的数据结构
const user = {
  username: 'zsfan',
  role: 'admin',
  permissions: ['user:add', 'user:edit', 'dashboard:view']
};

根据权限控制：路由 + 菜单 + 按钮

我们可以将权限码挂载到路由元信息（meta）上，动态控制菜单显示与页面访问权限。

权限路由守卫：不该进的页面别让进

动态路由 + 路由守卫实现控制

使用 Vue Router 的 beforeEach 方法做守卫，结合权限码判断是否有访问权限。

示例代码

js 复制代码

// 路由配置中添加权限元信息
{
  path: '/user/add',
  component: () => import('@/views/UserAdd.vue'),
  meta: { permission: 'user:add' }
}

js 复制代码

// 路由守卫控制访问
router.beforeEach((to, from, next) => {
  const permissions = getUserPermissions(); // 从缓存或 Vuex 获取权限列表
  const required = to.meta.permission;
  if (required && !permissions.includes(required)) {
    next('/403'); // 无权限跳转403
  } else {
    next();
  }
});

控制按钮和组件显示：不该点的按钮也隐藏掉

v-if + 权限判断方法

让按钮或控件只在有权限时才显示。

示例代码

html 复制代码

<!-- 只有有 user:add 权限才显示 -->
<button v-if="hasPermission('user:add')">新增用户</button>

js 复制代码

function hasPermission(code) {
  const permissions = getUserPermissions(); // 获取权限
  return permissions.includes(code);
}

这样做的好处是，不同用户登录看到的按钮完全不同，体验非常清爽。

后端权限验证：别信前端，核心操作必须后台校验

前端权限只是"演戏"，真正的数据操作必须后端判断权限

Node.js 示例代码

js 复制代码

app.post('/api/user/add', (req, res) => {
  const user = req.user; // 从 token 中解析的用户信息
  if (!user.permissions.includes('user:add')) {
    return res.status(403).json({ message: '你没有新增用户的权限' });
  }
  // 有权限，正常处理
  res.json({ message: '新增成功' });
});

典型场景实战

场景一：菜单根据权限动态渲染

js 复制代码

// 动态生成菜单
const allMenus = [
  { name: '用户管理', path: '/user', permission: 'user:view' },
  { name: '添加用户', path: '/user/add', permission: 'user:add' }
];

const userMenus = allMenus.filter(menu =>
  user.permissions.includes(menu.permission)
);

场景二：按钮级权限控制

有些功能你不希望每个员工都能用，比如"导出数据"、"重置密码"------用权限码控制按钮显示。

html 复制代码

<button v-if="hasPermission('user:reset')">重置密码</button>
<button v-if="hasPermission('user:export')">导出数据</button>

场景三：前端组件封装权限指令（Vue自定义指令）

js 复制代码

// 自定义权限指令 v-permission
app.directive('permission', {
  mounted(el, binding) {
    const permissions = getUserPermissions();
    if (!permissions.includes(binding.value)) {
      el.parentNode && el.parentNode.removeChild(el);
    }
  }
});

html 复制代码

<!-- 使用 -->
<button v-permission="'user:edit'">编辑</button>

QA 问答环节

Q1：前端控制是不是多余，反正后端也会拦？

不是。前端权限主要是提升用户体验 ，让用户不去点那些不能点的东西；后端才是真正的防线，负责拦截非法访问。

Q2：权限码应该放在哪管理？

建议所有权限码统一定义和管理，比如：

js 复制代码

// permission-codes.js
export const PERMISSIONS = {
  USER_ADD: 'user:add',
  USER_EDIT: 'user:edit',
  DASHBOARD_VIEW: 'dashboard:view'
};

这样方便维护，防止拼写错误。

Q3：权限缓存会不会被篡改？

可以结合 JWT 签名 + 本地缓存控制，或者通过加密缓存，但要明白：前端缓存不能作为权限依据，只能作为显示依据。

总结

前端权限控制，说简单也简单，说复杂也能无限扩展。它的核心原则是：

前端只控制"界面展示"，不能控制"数据和行为"
权限要后端返回、前端解析
所有权限判断必须同步做"后端验证"

一个好的权限系统，不仅是安全保障，更是用户体验的加分项。别再只靠"按钮v-if"了，从系统架构层去考虑权限管理，才是真正的开发者思维。