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

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

大家好，我是33blog的技术博主。今天想和大家分享一个在实际项目中经常遇到的难题：如何在前端路由和后端接口两个层面实现完整的权限控制。这个主题看似简单，但真正要做好却需要前后端的紧密配合。让我通过一个电商后台管理系统的实际案例，带大家走完整个权限控制的实现过程。

一、权限系统设计思路

在开始编码之前，我们需要明确权限控制的两个核心维度：

1. 前端路由权限：控制用户能看到哪些页面
2. 后端接口权限：控制用户能执行哪些操作

记得我第一次做权限系统时，只做了前端路由控制，结果用户虽然看不到某些菜单，但通过直接调用接口还是能操作数据。这个教训让我明白：前后端权限控制必须双管齐下。

二、后端权限控制实现

我们先从后端开始，因为这是整个权限系统的基石。

1. 数据库设计

我们需要设计用户-角色-权限的三层结构：

-- 用户表
CREATE TABLE users (
  id INT PRIMARY KEY AUTO_INCREMENT,
  username VARCHAR(50) UNIQUE NOT NULL,
  password VARCHAR(255) NOT NULL
);

-- 角色表  
CREATE TABLE roles (
  id INT PRIMARY KEY AUTO_INCREMENT,
  name VARCHAR(50) NOT NULL
);

-- 权限表
CREATE TABLE permissions (
  id INT PRIMARY KEY AUTO_INCREMENT,
  name VARCHAR(100) NOT NULL,
  method VARCHAR(10) NOT NULL,  -- GET/POST/PUT/DELETE
  path VARCHAR(255) NOT NULL    -- 接口路径
);

-- 关联表
CREATE TABLE user_roles (user_id INT, role_id INT);
CREATE TABLE role_permissions (role_id INT, permission_id INT);

2. 中间件实现

在Node.js中，我们可以创建一个权限验证中间件：

// middleware/authMiddleware.js
const checkPermission = async (req, res, next) => {
  try {
    const userId = req.user.id; // 从JWT中获取的用户ID
    const { method, path } = req;
    
    // 查询用户是否有访问该接口的权限
    const hasPermission = await checkUserPermission(userId, method, path);
    
    if (!hasPermission) {
      return res.status(403).json({
        code: 403,
        message: '权限不足'
      });
    }
    
    next();
  } catch (error) {
    res.status(500).json({
      code: 500,
      message: '权限验证失败'
    });
  }
};

// 权限检查函数
async function checkUserPermission(userId, method, path) {
  // 实际项目中这里需要查询数据库
  const query = `
    SELECT COUNT(*) as count 
    FROM users u
    JOIN user_roles ur ON u.id = ur.user_id
    JOIN role_permissions rp ON ur.role_id = rp.role_id  
    JOIN permissions p ON rp.permission_id = p.id
    WHERE u.id = ? AND p.method = ? AND p.path = ?
  `;
  
  // 执行查询并返回结果
  const result = await db.query(query, [userId, method, path]);
  return result[0].count > 0;
}

踩坑提示：记得在路由中使用这个中间件，比如：

app.delete('/api/users/:id', checkPermission, userController.deleteUser);

三、前端路由权限控制

后端安全了，现在来完善前端。我习惯使用Vue Router来实现。

1. 路由配置

// router/index.js
const routes = [
  {
    path: '/',
    redirect: '/dashboard'
  },
  {
    path: '/dashboard',
    component: Dashboard,
    meta: { requiresAuth: true, permission: 'dashboard:view' }
  },
  {
    path: '/user-management',
    component: UserManagement,
    meta: { requiresAuth: true, permission: 'user:manage' }
  },
  {
    path: '/settings',
    component: Settings,
    meta: { requiresAuth: true, permission: 'system:settings' }
  }
];

2. 路由守卫

// router/guards.js
import store from '@/store';

router.beforeEach((to, from, next) => {
  // 检查路由是否需要认证
  if (to.matched.some(record => record.meta.requiresAuth)) {
    // 检查用户是否登录
    if (!store.getters.isLoggedIn) {
      next({
        path: '/login',
        query: { redirect: to.fullPath }
      });
      return;
    }
    
    // 检查用户是否有权限访问该路由
    const userPermissions = store.getters.getPermissions;
    const requiredPermission = to.meta.permission;
    
    if (requiredPermission && !userPermissions.includes(requiredPermission)) {
      next('/403'); // 无权限页面
      return;
    }
  }
  
  next();
});

3. 动态菜单生成

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

// utils/menuGenerator.js
export function generateMenu(permissions) {
  const allMenus = [
    {
      title: '仪表盘',
      icon: 'dashboard',
      path: '/dashboard',
      permission: 'dashboard:view'
    },
    {
      title: '用户管理',
      icon: 'user',
      path: '/user-management', 
      permission: 'user:manage'
    },
    {
      title: '系统设置',
      icon: 'setting',
      path: '/settings',
      permission: 'system:settings'
    }
  ];
  
  return allMenus.filter(menu => 
    !menu.permission || permissions.includes(menu.permission)
  );
}

四、前后端权限同步

这是最关键的一步！前后端权限必须保持一致。

1. 登录时获取权限

// store/user.js
actions: {
  async login({ commit }, credentials) {
    try {
      const response = await api.login(credentials);
      const { token, user, permissions } = response.data;
      
      // 存储token和用户信息
      localStorage.setItem('token', token);
      commit('SET_USER', user);
      commit('SET_PERMISSIONS', permissions);
      
      return permissions;
    } catch (error) {
      throw error;
    }
  }
}

2. 接口权限映射

建立一个前后端统一的权限标识符：

// constants/permissions.js
export const PERMISSION_MAP = {
  'user:view': { method: 'GET', path: '/api/users' },
  'user:create': { method: 'POST', path: '/api/users' },
  'user:edit': { method: 'PUT', path: '/api/users/*' },
  'user:delete': { method: 'DELETE', path: '/api/users/*' }
};