设计一个通用的 Vue 权限管理系统，支持路由权限、按钮级权限、数据权限，并能与后端 API 动态集成。 - 智猿学院-前后端，数据库，人工智能，云计算等领域前沿技术讲座

各位观众老爷，今天咱们来聊聊Vue权限管理这事儿。权限管理，听起来高大上，其实就是“谁能看啥，谁能干啥”的问题。搞定了它，你的系统才能变得井井有条，不会出现张三偷偷删了李四数据的狗血剧情。

这次咱要撸的是一个通用的Vue权限管理系统，它得能管路由、按钮，甚至细到数据层面，还得能和后端API无缝衔接，真正实现“权限在手，天下我有”的境界。

一、权限模型：设计蓝图

首先，咱们得搞清楚权限的本质。权限，说白了，就是一种控制访问的策略。最常见的权限模型有以下几种：

RBAC（Role-Based Access Control）： 基于角色访问控制，用户被赋予角色，角色拥有权限。这是最经典的模型，简单易懂，扩展性好。
ACL（Access Control List）： 访问控制列表，直接将权限赋予用户或组。灵活性高，但管理复杂。
ABAC（Attribute-Based Access Control）： 基于属性的访问控制，根据用户的属性、资源属性、环境属性等动态决策权限。最灵活，也最复杂。

考虑到通用性和易用性，咱们这里选择 RBAC 模型。简单画个图：

+----------+     +--------+     +-----------+
|  User    |---> |  Role  |---> | Permission|
+----------+     +--------+     +-----------+
  (用户)      (角色)       (权限)

用户拥有角色，角色拥有权限。这样，我们只需要管理角色和权限，就可以控制用户的访问。

二、路由权限：导航守卫显神通

路由权限，就是控制用户能访问哪些页面。在Vue里，我们可以用vue-router的导航守卫来实现。

定义路由元信息：

在路由配置里，给每个路由加上meta字段，用于存储权限信息。例如：

const routes = [
 {
   path: '/home',
   component: Home,
   meta: { requiresAuth: true } // 需要登录才能访问
 },
 {
   path: '/admin',
   component: Admin,
   meta: { requiresRole: 'admin' } // 需要admin角色才能访问
 },
 {
   path: '/public',
   component: Public
 }
];

全局前置守卫：

在router.beforeEach里进行权限判断。

router.beforeEach((to, from, next) => {
 const isAuthenticated = localStorage.getItem('token'); // 假设token存在localStorage里
 const userRole = localStorage.getItem('role'); // 假设角色信息存储在localStorage里

 if (to.meta.requiresAuth && !isAuthenticated) {
   // 需要登录，但未登录，跳转到登录页
   next('/login');
 } else if (to.meta.requiresRole && userRole !== to.meta.requiresRole) {
   // 需要特定角色，但用户角色不匹配，跳转到403
   next('/403');
 } else {
   // 权限验证通过，放行
   next();
 }
});

这段代码的意思是：

如果路由需要登录(requiresAuth: true)，但用户没登录，就跳转到登录页。
如果路由需要特定角色(requiresRole: 'admin')，但用户的角色不是admin，就跳转到403（无权限）页面。
否则，一切正常，放行。

动态路由：

如果权限是动态的，比如从后端获取的，我们可以使用router.addRoute动态添加路由。

// 假设从后端获取的路由配置
const userRoutes = [
  {
    path: '/profile',
    component: Profile,
    meta: { requiresAuth: true }
  }
];

userRoutes.forEach(route => {
  router.addRoute(route);
});

这样，只有登录用户才能看到/profile页面。

三、按钮级权限：指令来帮忙

按钮级权限，就是控制用户能看到哪些按钮，能执行哪些操作。我们可以使用自定义指令来实现。

定义指令：

Vue.directive('permission', {
 inserted: function (el, binding) {
   const permission = binding.value; // 获取指令的值，也就是权限标识
   const userPermissions = JSON.parse(localStorage.getItem('permissions') || '[]'); // 假设权限列表存在localStorage里，格式为["edit", "delete"]

   if (!userPermissions.includes(permission)) {
     // 用户没有该权限，移除元素
     el.parentNode.removeChild(el);
   }
 }
});

这个指令做了以下事情：

获取指令的值（binding.value），这个值就是权限标识，比如'edit'。
从localStorage里获取用户的权限列表。
判断用户是否拥有该权限。如果没有，就直接把这个按钮从DOM里移除。

使用指令：

<button v-permission="'edit'">编辑</button>
<button v-permission="'delete'">删除</button>

如果用户没有'edit'权限，那么“编辑”按钮就不会显示。

四、数据权限：后端API来兜底

数据权限，就是控制用户能看到哪些数据，能修改哪些数据。这个一般需要在后端API层面进行控制。

后端API权限控制：

后端API需要根据用户的角色和权限，返回不同的数据。例如，如果用户只能查看自己的订单，那么API就应该只返回该用户的订单数据。

# Python Flask 示例
from flask import Flask, request, jsonify

app = Flask(__name__)

# 模拟用户角色和权限
user_roles = {'user1': ['customer'], 'admin1': ['admin']}
role_permissions = {'customer': ['view_own_orders'], 'admin': ['view_all_orders', 'edit_orders']}

def check_permission(user, permission):
    roles = user_roles.get(user, [])
    for role in roles:
        if permission in role_permissions.get(role, []):
            return True
    return False

@app.route('/orders')
def get_orders():
    user = request.args.get('user') # 假设用户通过参数传递
    if not user:
        return jsonify({'error': 'User not provided'}), 400

    if check_permission(user, 'view_all_orders'):
        # 管理员可以查看所有订单
        orders = [{'id': 1, 'user': 'user1', 'amount': 100}, {'id': 2, 'user': 'user2', 'amount': 200}]
        return jsonify(orders)
    elif check_permission(user, 'view_own_orders'):
        # 普通用户只能查看自己的订单
        orders = [{'id': 1, 'user': user, 'amount': 100}]
        return jsonify(orders)
    else:
        return jsonify({'error': 'Unauthorized'}), 403

if __name__ == '__main__':
    app.run(debug=True)

这段代码模拟了一个简单的订单API，它根据用户的角色，返回不同的订单数据。

前端配合：

前端需要根据用户的角色，调用不同的API，或者对API返回的数据进行过滤。

// 假设用户角色存储在localStorage里
const userRole = localStorage.getItem('role');

if (userRole === 'admin') {
  // 管理员，调用获取所有订单的API
  axios.get('/orders?user=admin1')
    .then(response => {
      this.orders = response.data;
    });
} else {
  // 普通用户，调用获取自己订单的API
  axios.get('/orders?user=user1')
    .then(response => {
      this.orders = response.data;
    });
}

这样，我们就实现了数据权限的控制。

五、与后端API动态集成：权限的灵魂

要实现动态权限管理，我们需要与后端API进行集成。

登录时获取权限列表：

用户登录成功后，从后端API获取用户的角色和权限列表，存储到localStorage或者Vuex里。

// 登录成功后
axios.post('/login', { username: 'user1', password: 'password' })
  .then(response => {
    const token = response.data.token;
    const role = response.data.role;
    const permissions = response.data.permissions;

    localStorage.setItem('token', token);
    localStorage.setItem('role', role);
    localStorage.setItem('permissions', JSON.stringify(permissions)); // 存储权限列表
  });

权限更新：

当用户的角色或权限发生变化时，需要重新从后端API获取权限列表，并更新前端存储的权限信息。

// 假设用户修改了个人信息，需要更新权限
axios.get('/user/permissions')
  .then(response => {
    const permissions = response.data.permissions;
    localStorage.setItem('permissions', JSON.stringify(permissions));
  });

API请求拦截：

可以在axios的请求拦截器里，自动添加Authorization头部，将token发送给后端。

axios.interceptors.request.use(
  config => {
    const token = localStorage.getItem('token');
    if (token) {
      config.headers['Authorization'] = 'Bearer ' + token;
    }
    return config;
  },
  error => {
    return Promise.reject(error);
  }
);

这样，后端API就可以根据token来验证用户的身份和权限。

六、权限管理后台：可视化操作

为了方便管理角色和权限，我们可以做一个权限管理后台。

角色管理：
- 添加、修改、删除角色。
- 为角色分配权限。
权限管理：
- 添加、修改、删除权限。
- 定义权限的名称、描述等信息。
用户管理：
- 添加、修改、删除用户。
- 为用户分配角色。

权限管理后台可以使用Vue的组件来实现，配合Element UI或者Ant Design Vue等UI库，可以快速搭建一个美观易用的后台界面。

七、总结：权限的艺术

一个好的权限管理系统，应该具备以下特点：

通用性： 能够适用于各种不同的业务场景。
灵活性： 能够支持各种不同的权限模型。
易用性： 方便管理和使用。
安全性： 能够有效地保护系统资源。

权限管理是一门艺术，需要根据具体的业务需求，选择合适的权限模型和实现方式。希望今天的分享能帮助你更好地理解和应用Vue权限管理。

附录：代码示例

下面是一个更完整的代码示例，包含了路由权限、按钮级权限和数据权限的实现。

// main.js
import Vue from 'vue'
import App from './App.vue'
import router from './router'
import axios from 'axios'

Vue.config.productionTip = false

// 自定义指令：按钮权限
Vue.directive('permission', {
  inserted: function (el, binding) {
    const permission = binding.value;
    const userPermissions = JSON.parse(localStorage.getItem('permissions') || '[]');

    if (!userPermissions.includes(permission)) {
      el.parentNode.removeChild(el);
    }
  }
});

// axios 拦截器
axios.interceptors.request.use(
  config => {
    const token = localStorage.getItem('token');
    if (token) {
      config.headers['Authorization'] = 'Bearer ' + token;
    }
    return config;
  },
  error => {
    return Promise.reject(error);
  }
);

new Vue({
  router,
  render: h => h(App)
}).$mount('#app')

// router.js
import Vue from 'vue'
import VueRouter from 'vue-router'
import Home from './components/Home.vue'
import Admin from './components/Admin.vue'
import Login from './components/Login.vue'
import NotFound from './components/NotFound.vue'

Vue.use(VueRouter)

const routes = [
  {
    path: '/',
    redirect: '/home'
  },
  {
    path: '/home',
    component: Home,
    meta: { requiresAuth: true }
  },
  {
    path: '/admin',
    component: Admin,
    meta: { requiresRole: 'admin' }
  },
  {
    path: '/login',
    component: Login
  },
  {
    path: '/404',
    component: NotFound
  },
  {
    path: '*',
    redirect: '/404'
  }
]

const router = new VueRouter({
  mode: 'history',
  base: process.env.BASE_URL,
  routes
})

router.beforeEach((to, from, next) => {
  const isAuthenticated = localStorage.getItem('token');
  const userRole = localStorage.getItem('role');

  if (to.meta.requiresAuth && !isAuthenticated) {
    next('/login');
  } else if (to.meta.requiresRole && userRole !== to.meta.requiresRole) {
    next('/404'); // 或者跳转到403页面
  } else {
    next();
  }
});

export default router

// App.vue
<template>
  <div id="app">
    <nav>
      <router-link to="/home">Home</router-link> |
      <router-link to="/admin">Admin</router-link> |
      <router-link to="/login">Login</router-link>
    </nav>
    <router-view/>
  </div>
</template>

// Home.vue
<template>
  <div>
    <h1>Home Page</h1>
    <button v-permission="'edit'">Edit</button>
    <button v-permission="'delete'">Delete</button>
    <p>User Orders: {{ orders }}</p>
  </div>
</template>

<script>
import axios from 'axios'

export default {
  data() {
    return {
      orders: []
    }
  },
  mounted() {
    this.fetchOrders()
  },
  methods: {
    fetchOrders() {
      axios.get('/api/orders') // 假设后端API地址
        .then(response => {
          this.orders = response.data
        })
    }
  }
}
</script>

// Admin.vue
<template>
  <div>
    <h1>Admin Page</h1>
    <p>Admin Content</p>
  </div>
</template>

// Login.vue
<template>
  <div>
    <h1>Login Page</h1>
    <button @click="login">Login</button>
  </div>
</template>

<script>
import axios from 'axios'

export default {
  methods: {
    login() {
      axios.post('/api/login', { username: 'admin', password: 'password' })
        .then(response => {
          const token = response.data.token
          const role = response.data.role
          const permissions = response.data.permissions

          localStorage.setItem('token', token)
          localStorage.setItem('role', role)
          localStorage.setItem('permissions', JSON.stringify(permissions))

          this.$router.push('/home')
        })
    }
  }
}
</script>

// backend (Node.js Express example)
const express = require('express');
const cors = require('cors');
const jwt = require('jsonwebtoken');

const app = express();
app.use(cors());
app.use(express.json());

const secretKey = 'your-secret-key'; // 实际项目中需要更复杂的密钥管理

const users = {
  'admin': { role: 'admin', permissions: ['edit', 'delete', 'view'] },
  'user': { role: 'user', permissions: ['view'] }
};

app.post('/api/login', (req, res) => {
  const { username, password } = req.body;

  if (username in users) {
    const user = users[username];
    const token = jwt.sign({ username: username, role: user.role, permissions: user.permissions }, secretKey);
    res.json({ token: token, role: user.role, permissions: user.permissions });
  } else {
    res.status(401).json({ message: 'Invalid credentials' });
  }
});

function verifyToken(req, res, next) {
    const authHeader = req.headers['authorization'];
    const token = authHeader && authHeader.split(' ')[1];

    if (token == null) return res.sendStatus(401);

    jwt.verify(token, secretKey, (err, user) => {
        if (err) return res.sendStatus(403);
        req.user = user;
        next();
    });
}

app.get('/api/orders', verifyToken, (req, res) => {
  const { username, role, permissions } = req.user;
  let orders = [];

  if (permissions.includes('view')) {
    orders = [{ id: 1, name: 'Order 1' }, { id: 2, name: 'Order 2' }];
  }

  res.json(orders);
});

app.listen(3000, () => {
  console.log('Server started on port 3000');
});

这个示例提供了一个基本的Vue前端和Node.js后端的框架，实现了登录、路由权限、按钮权限和数据权限。需要根据实际情况进行调整和完善。特别要注意密钥管理，生产环境需要用更安全的方式管理secretKey。示例中简单的权限控制逻辑，实际应用中权限控制会更复杂。

好了，今天的讲座就到这里。希望大家有所收获！

发表回复 取消回复

发表回复取消回复