前端路由与后端接口权限控制方案-源码库

前端路由与后端接口权限控制方案：从设计到实战

在实际项目中，权限控制是绕不开的话题。今天我想和大家分享一套经过多个项目验证的前端路由与后端接口权限控制方案，这套方案不仅能有效防止越权访问，还能提供良好的用户体验。

一、整体架构设计思路

在开始具体实现前，我们先明确几个核心原则：

前端负责路由级别的权限控制，提供友好的无权限提示
后端负责接口级别的权限校验，确保数据安全
权限信息统一管理，避免重复配置

我习惯将权限分为菜单权限、操作权限和数据权限三个层次，今天重点讨论前两者。

二、后端权限设计实现

后端采用RBAC（基于角色的访问控制）模型，这里以Node.js + Express为例：


// 权限中间件
const checkPermission = (requiredPermission) => {
  return (req, res, next) => {
    const userPermissions = req.user.permissions; // 从JWT中解析
    
    if (!userPermissions.includes(requiredPermission)) {
      return res.status(403).json({
        code: 403,
        message: '权限不足'
      });
    }
    next();
  };
};

// 路由中使用
app.get('/admin/users', 
  checkPermission('user:read'), 
  (req, res) => {
    // 获取用户列表逻辑
  }
);

踩坑提示：一定要在后端做最终的权限校验，前端校验只是为了用户体验，不能作为安全屏障。

三、前端路由权限控制

在Vue项目中，我通常这样实现路由守卫：


// router/index.js
router.beforeEach((to, from, next) => {
  const hasToken = localStorage.getItem('token');
  const userPermissions = store.getters.permissions;
  
  // 检查是否需要登录
  if (to.meta.requiresAuth && !hasToken) {
    next('/login');
    return;
  }
  
  // 检查路由权限
  if (to.meta.permission && !userPermissions.includes(to.meta.permission)) {
    next('/403'); // 无权限页面
    return;
  }
  
  next();
});

// 路由配置示例
const routes = [
  {
    path: '/admin',
    component: AdminLayout,
    meta: { 
      requiresAuth: true,
      permission: 'admin:access'
    }
  }
];

四、动态菜单生成

根据用户权限动态生成侧边栏菜单：


// 菜单配置
const menuConfig = [
  {
    title: '用户管理',
    path: '/users',
    icon: 'user',
    permission: 'user:read'
  },
  {
    title: '系统设置',
    path: '/settings',
    icon: 'setting',
    permission: 'system:manage'
  }
];

// 过滤菜单
const filteredMenu = menuConfig.filter(item => 
  userPermissions.includes(item.permission)
);

五、按钮级别权限控制

对于操作按钮，我习惯使用自定义指令：


// 权限指令
Vue.directive('permission', {
  inserted: (el, binding) => {
    const { value } = binding;
    const permissions = store.getters.permissions;
    
    if (value && !permissions.includes(value)) {
      el.parentNode && el.parentNode.removeChild(el);
    }
  }
});

// 模板中使用