Vue3 管理系统权限管理：全面指南

2024-01-02 09:15:21

前言

在现代管理系统中，权限管理至关重要，它赋予用户访问和执行特定操作的能力，同时限制未经授权的访问。Vue3，作为前端框架的领军者，提供了构建权限管理系统的强大工具。本文将深入探讨 Vue3 中权限管理的各个方面，提供一个全面指南。

路由权限控制用户对不同页面的访问。在 Vue3 中，我们可以使用 vue-router 来实现路由权限。首先，我们需要创建 permission.js 文件来定义路由规则：

export const permissionList = [
  { path: '/home', name: 'Home', meta: { requiresAuth: true } },
  { path: '/about', name: 'About', meta: { requiresAuth: false } },
];

然后，在 main.js 文件中使用 createRouter 函数创建路由并应用权限检查：

const router = createRouter({
  history: createWebHistory(),
  routes: permissionList,
});

router.beforeEach((to, from, next) => {
  if (to.meta.requiresAuth && !isLoggedIn) {
    next('/');
  } else {
    next();
  }
});

接口权限控制用户对 API 端点的访问。在 Vue3 中，我们可以使用 axios 和 vuex 来实现接口权限：

const axiosInstance = axios.create();

axiosInstance.interceptors.request.use(
  (config) => {
    if (isLoggedIn) {
      config.headers['Authorization'] = `Bearer ${token}`;
    }
    return config;
  },
  (error) => {
    return Promise.reject(error);
  }
);

const store = createStore({
  state: {
    accessToken: null,
  },
  getters: {
    isLoggedIn: (state) => state.accessToken !== null,
  },
});

菜单栏权限控制用户在菜单中看到的选项。在 Vue3 中，我们可以使用 v-if 和 v-for 指令来实现菜单栏权限：

<template>
  <ul>
    <li v-for="item in menuList" v-if="hasPermission(item.permission)">
      <a :href="item.link">{{ item.label }}</a>
    </li>
  </ul>
</template>

<script>
export default {
  computed: {
    menuList() {
      return [
        { label: 'Home', link: '/', permission: 'home' },
        { label: 'About', link: '/about', permission: 'about' },
      ];
    },
  },
  methods: {
    hasPermission(permission) {
      return this.$store.getters.permissions.includes(permission);
    },
  },
};
</script>

动态路由设置允许根据用户权限动态生成路由。在 Vue3 中，我们可以使用 useRouter 钩子和 createRouter 的 dynamicRoutes 选项：

import { useRouter } from 'vue-router';

const router = useRouter();

const dynamicRoutes = [
  {
    path: '/user/:id',
    name: 'User',
    component: () => import('@/views/User.vue'),
    meta: { requiresAuth: true, permission: 'user' },
  },
];

router.addRoutes(dynamicRoutes);

按钮权限控制用户对按钮操作的访问。在 Vue3 中，我们可以使用 v-if 和 v-on 指令来实现按钮权限：

<template>
  <button v-if="hasPermission('button') @click="onClick">Button</button>
</template>

<script>
export default {
  methods: {
    onClick() {
      // ...
    },
    hasPermission(permission) {
      return this.$store.getters.permissions.includes(permission);
    },
  },
};
</script>

以下是一个 Vue3 权限管理系统的示例代码：

<template>
  <div>
    <nav>
      <ul>
        <li v-for="item in menuList" v-if="hasPermission(item.permission)">
          <a :href="item.link">{{ item.label }}</a>
        </li>
      </ul>
    </nav>
    <router-view />
  </div>
</template>

<script>
import { useRouter, useStore } from 'vuex';

export default {
  computed: {
    menuList() {
      return [
        { label: 'Home', link: '/', permission: 'home' },
        { label: 'About', link: '/about', permission: 'about' },
      ];
    },
    permissions() {
      return this.$store.getters.permissions;
    },
  },
  methods: {
    hasPermission(permission) {
      return this.permissions.includes(permission);
    },
  },
};
</script>