Vue + Express + MySQL：项目权限控制终极指南

前端

2023-11-15 05:22:35

对于任何注重安全和可靠性的Web应用程序而言，权限控制都是必不可少的。本文将深入探讨如何使用Vue.js、Express.js和MySQL构建健壮的权限控制系统。我们不仅会提供理论知识，还将提供完整的代码示例，让您立即开始实施。

引言

在现代Web开发中，权限控制对于确保数据安全和应用程序完整性至关重要。它涉及控制用户对应用程序资源的访问权限，例如页面、数据和功能。通过实施有效的权限控制，您可以防止未经授权的用户访问敏感信息或执行有害操作。

基础概念

在理解如何实施权限控制之前，让我们先了解一些基本概念：

用户： 应用程序中的个体，拥有特定的权限。
角色： 一组权限的集合，可以分配给用户。
资源： 应用程序中受保护的对象，例如页面、API或数据库表。
访问控制列表（ACL）： 将用户或角色映射到资源权限的列表。

实现权限控制

使用Vue.js、Express.js和MySQL实现权限控制涉及以下步骤：

创建用户和角色： 使用MySQL创建一个数据库表来存储用户、角色和ACL。
定义权限： 使用Express.js中间件定义应用程序中所需的权限。
将用户分配给角色： 将用户与适当的角色关联起来。
应用权限检查： 在处理用户请求时，检查用户是否有权访问请求的资源。

代码示例

MySQL表创建：

CREATE TABLE users (
  id INT NOT NULL AUTO_INCREMENT,
  username VARCHAR(255) NOT NULL UNIQUE,
  password VARCHAR(255) NOT NULL,
  PRIMARY KEY (id)
);

CREATE TABLE roles (
  id INT NOT NULL AUTO_INCREMENT,
  name VARCHAR(255) NOT NULL UNIQUE,
  PRIMARY KEY (id)
);

CREATE TABLE user_roles (
  user_id INT NOT NULL,
  role_id INT NOT NULL,
  PRIMARY KEY (user_id, role_id),
  FOREIGN KEY (user_id) REFERENCES users (id),
  FOREIGN KEY (role_id) REFERENCES roles (id)
);

CREATE TABLE resources (
  id INT NOT NULL AUTO_INCREMENT,
  name VARCHAR(255) NOT NULL UNIQUE,
  PRIMARY KEY (id)
);

CREATE TABLE permissions (
  id INT NOT NULL AUTO_INCREMENT,
  name VARCHAR(255) NOT NULL UNIQUE,
  PRIMARY KEY (id)
);

CREATE TABLE resource_permissions (
  resource_id INT NOT NULL,
  permission_id INT NOT NULL,
  PRIMARY KEY (resource_id, permission_id),
  FOREIGN KEY (resource_id) REFERENCES resources (id),
  FOREIGN KEY (permission_id) REFERENCES permissions (id)
);

CREATE TABLE user_permissions (
  user_id INT NOT NULL,
  permission_id INT NOT NULL,
  PRIMARY KEY (user_id, permission_id),
  FOREIGN KEY (user_id) REFERENCES users (id),
  FOREIGN KEY (permission_id) REFERENCES permissions (id)
);

Express.js中间件：

const express = require('express');
const app = express();

const isAuthorized = (permission) => {
  return (req, res, next) => {
    if (req.user && req.user.hasPermission(permission)) {
      next();
    } else {
      res.status(403).send('Forbidden');
    }
  };
};

app.get('/protected-page', isAuthorized('access_protected_page'), (req, res) => {
  res.send('You are authorized to access this page.');
});

app.listen(3000);

Vue.js组件：

<template>
  <div>
    <h1>{{ title }}</h1>
    <button v-if="user.hasPermission('create_post')">Create Post</button>
  </div>
</template>

<script>
import { mapState } from 'vuex';

export default {
  computed: {
    ...mapState(['user']),

    title() {
      return this.user.name + '\'s Dashboard';
    },
  },
};
</script>