用Vue动态路由和菜单授权管理大升级，角色权限一步到位！

2023-12-15 18:20:08

动态路由和菜单：实现 Vue 项目中基于角色的权限控制

在现代 Vue 项目中，权限管理对于确保应用程序的安全和可靠至关重要。为了实现细粒度的权限控制，我们可以使用动态路由和菜单，根据用户的角色过滤访问，并通过路由守卫拦截处理路由访问。

一、动态生成路由和菜单

1. 根据角色过滤路由

为了根据角色过滤路由，我们可以使用 Vuex 来存储用户的角色信息。然后，在路由配置中，我们可以使用 meta 属性指定每个路由的授权角色。

// store/index.js
import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

const store = new Vuex.Store({
  state: {
    role: ''
  },
  mutations: {
    setRole(state, role) {
      state.role = role
    }
  }
})

export default store

// router/index.js
import Vue from 'vue'
import VueRouter from 'vue-router'

Vue.use(VueRouter)

const routes = [
  {
    path: '/home',
    name: 'Home',
    component: Home,
    meta: {
      roles: ['admin', 'editor']
    }
  },
  {
    path: '/about',
    name: 'About',
    component: About,
    meta: {
      roles: ['admin']
    }
  },
  {
    path: '/contact',
    name: 'Contact',
    component: Contact,
    meta: {
      roles: ['editor', 'user']
    }
  }
]

const router = new VueRouter({
  routes
})

router.beforeEach((to, from, next) => {
  const role = store.state.role
  if (to.meta.roles.includes(role)) {
    next()
  } else {
    next('/')
  }
})

export default router

2. 动态生成菜单

过滤路由后，我们可以根据用户的角色动态生成菜单。我们可以使用 Vue.js 的模板来渲染菜单项：

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

<script>
import Vue from 'vue'

export default {
  data() {
    return {
      menuItems: []
    }
  },
  created() {
    this.generateMenuItems()
  },
  methods: {
    generateMenuItems() {
      const role = store.state.role
      const routes = router.getRoutes()
      this.menuItems = routes.filter(route => route.meta.roles.includes(role))
    }
  }
}
</script>

二、路由守卫拦截处理

Vue Router 提供了路由守卫，允许我们在路由导航之前或之后拦截处理路由访问。

router.beforeEach((to, from, next) => {
  const role = store.state.role
  if (to.meta.roles.includes(role)) {
    next()
  } else {
    next('/')
  }
})

在 beforeEach 钩子函数中，我们可以检查用户的角色是否有权访问该路由。如果拥有权限，则允许继续导航，否则重定向到根路由。

结论

通过结合动态路由和菜单以及路由守卫，我们可以实现基于角色的权限控制，确保用户只能访问有权访问的页面。这提高了应用程序的安全性，并为用户提供了定制化体验。

常见问题解答