突破常规：Vuex + Vue Router 打造动态菜单和路由权限的从零经验

2023-11-28 21:47:00

前言

作为一名前端开发人员，您可能已经使用 Vue 和 Vue Router 构建过许多复杂的界面。但是，当您需要构建更复杂的应用程序时，您可能会发现自己需要更强大的工具来管理路由和权限。这时候，Vuex 就派上用场了。

Vuex 是一个状态管理库，它允许您在 Vue 应用程序中存储和管理共享状态。这对于构建动态菜单和路由权限系统非常有用，因为您可以使用 Vuex 来存储用户角色和权限，并在需要时使用这些信息来动态显示菜单和限制对路由的访问。

入门

1. 安装 Vuex

npm install vuex

2. 在 Vue 项目中配置 Vuex

在您的 Vue 项目中，您需要创建一个 Vuex 实例并将其注入到 Vue 实例中。您可以在 main.js 文件中执行此操作：

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

const store = new Vuex.Store({
  state: {
    // 您的状态在这里
  },
  mutations: {
    // 您的突变在这里
  },
  actions: {
    // 您的行为在这里
  }
})

export default store

3. 在 Vue 组件中使用 Vuex

现在您已经配置了 Vuex，您可以在 Vue 组件中使用它。您可以使用 mapState()、mapMutations() 和 mapActions() 辅助函数来将 Vuex 状态、突变和行为映射到组件。

例如，以下代码展示了如何使用 mapState() 辅助函数将 Vuex 状态映射到组件：

import { mapState } from 'vuex'

export default {
  computed: {
    ...mapState([
      'count'
    ])
  }
}

构建动态菜单

现在我们已经学习了 Vuex 的基础知识，我们可以开始构建动态菜单了。

1. 创建一个菜单组件

首先，我们需要创建一个菜单组件。这个组件将负责显示菜单项。

<template>
  <ul>
    <li v-for="item in menuItems" :key="item.id">
      <a :href="item.url">{{ item.name }}</a>
    </li>
  </ul>
</template>

<script>
export default {
  props: ['menuItems']
}
</script>

2. 将菜单组件添加到您的应用程序中

接下来，您需要将菜单组件添加到您的应用程序中。您可以将它添加到您的导航栏或侧边栏中。

3. 在 Vuex 中存储菜单项

现在我们需要在 Vuex 中存储菜单项。您可以创建一个名为 menuItems 的状态，并在其中存储菜单项数组。

const store = new Vuex.Store({
  state: {
    menuItems: [
      {
        id: 1,
        name: '首页',
        url: '/'
      },
      {
        id: 2,
        name: '关于',
        url: '/about'
      },
      {
        id: 3,
        name: '联系我们',
        url: '/contact'
      }
    ]
  }
})

4. 在菜单组件中使用 Vuex 状态

最后，您需要在菜单组件中使用 Vuex 状态。您可以使用 mapState() 辅助函数将 menuItems 状态映射到组件。

import { mapState } from 'vuex'

export default {
  computed: {
    ...mapState([
      'menuItems'
    ])
  }
}

构建路由权限

现在我们已经学习了如何构建动态菜单，我们可以开始构建路由权限了。

1. 创建一个路由权限组件

首先，我们需要创建一个路由权限组件。这个组件将负责检查用户是否有权访问某个路由。

<template>
  <router-view :guard="hasPermission" />
</template>

<script>
import { useRoute } from 'vue-router'

export default {
  setup() {
    const route = useRoute()

    return {
      hasPermission: () => {
        // 检查用户是否有权访问此路由
        return true
      }
    }
  }
}
</script>

2. 将路由权限组件添加到您的应用程序中

接下来，您需要将路由权限组件添加到您的应用程序中。您可以将它添加到您的路由配置中。

const routes = [
  {
    path: '/',
    component: HomeView
  },
  {
    path: '/about',
    component: AboutView,
    meta: {
      requiresAuth: true
    }
  },
  {
    path: '/contact',
    component: ContactView,
    meta: {
      requiresAuth: false
    }
  }
]

3. 在 Vuex 中存储用户角色和权限

现在我们需要在 Vuex 中存储用户角色和权限。您可以创建一个名为 user 的状态，并在其中存储用户角色和权限对象。

const store = new Vuex.Store({
  state: {
    user: {
      role: 'admin',
      permissions: ['view_users', 'edit_users']
    }
  }
})

4. 在路由权限组件中使用 Vuex 状态

最后，您需要在路由权限组件中使用 Vuex 状态。您可以使用 mapState() 辅助函数将 user 状态映射到组件。

import { mapState } from 'vuex'

export default {
  computed: {
    ...mapState([
      'user'
    ])
  },
  methods: {
    hasPermission: () => {
      // 检查用户是否有权访问此路由
      const route = useRoute()
      const requiresAuth = route.meta.requiresAuth

      if (requiresAuth && !this.user.isAuthenticated) {
        return false
      }

      return true
    }
  }
}