Vue Router 动态侧边栏：如何根据路由区分用户权限

2023-10-28 01:30:07

前言

在管理后台系统中，Vue Router 扮演着重要的角色，除了管理路由外，它还承担着用户权限控制和动态侧边栏生成的任务。本文将详细介绍如何根据路由区分用户权限，并结合 Vue Router 实现动态侧边栏，帮助你轻松构建具有权限控制的管理后台。

权限控制

1. 获取用户权限

第一步是获取用户的权限信息。在实际开发中，用户权限通常存储在数据库或其他持久化存储介质中。我们可以通过接口或其他方式从后端获取用户的权限数据。

2. 定义权限规则

获取到用户的权限数据后，我们需要定义权限规则。权限规则可以是一个函数或一个对象，用于判断用户是否有权访问某个路由。

例如，我们可以定义一个简单的权限规则：

const hasPermission = (route) => {
  // 从用户权限数据中获取当前用户的权限列表
  const permissions = getUserPermissions();

  // 检查当前用户是否有权访问该路由
  return permissions.includes(route.name);
};

在这个规则中，我们首先从用户权限数据中获取当前用户的权限列表，然后检查该列表中是否包含当前路由的名称。如果包含，则表示用户有权访问该路由；否则，表示用户无权访问该路由。

动态侧边栏

1. 构建侧边栏数据

有了权限规则后，我们可以开始构建侧边栏数据。侧边栏数据通常是一个数组，其中每个元素代表一个侧边栏菜单项。

我们可以通过以下步骤构建侧边栏数据：

首先，从路由表中获取所有路由。
然后，对每个路由进行过滤，只保留那些用户有权访问的路由。
最后，将这些路由转换为侧边栏菜单项。

2. 渲染侧边栏

构建好侧边栏数据后，就可以渲染侧边栏了。我们可以使用 Vue.js 的内置组件 v-for 来渲染侧边栏菜单项。

<template>
  <div id="sidebar">
    <ul>
      <li v-for="item in sidebarData" :key="item.path">
        <router-link :to="item.path">{{ item.name }}</router-link>
      </li>
    </ul>
  </div>
</template>

<script>
import { computed } from 'vue';
import { getUserPermissions, getRouterData } from '@/api';

export default {
  setup() {
    // 获取用户权限数据
    const permissions = getUserPermissions();

    // 获取路由数据
    const routerData = getRouterData();

    // 过滤出用户有权访问的路由
    const filteredRouterData = routerData.filter((route) => {
      return hasPermission(route);
    });

    // 将路由转换为侧边栏菜单项
    const sidebarData = filteredRouterData.map((route) => {
      return {
        path: route.path,
        name: route.name,
      };
    });

    // 返回计算属性
    return {
      sidebarData: computed(() => sidebarData),
    };
  },
};
</script>