Vue Router 角色权限控制方案 - 详细指南

Vue Router 是 Vue.js 官方的路由管理器，它可以将组件映射到不同的 URL。而角色权限是指在系统中，不同用户拥有不同的权限，可以访问不同的页面或进行不同的操作。在应用中，常常需要根据用户的角色权限来控制访问不同页面或操作的权限。

下面是一种基于 Vue Router 的角色权限应用解决方案：

1. 在路由配置中加入 meta 属性，用于存储当前路由的角色权限信息。例如：

const routes = [
  {
    path: '/home',
    component: Home,
    meta: { roles: ['admin', 'user'] }
  },
  {
    path: '/admin',
    component: Admin,
    meta: { roles: ['admin'] }
  },
  {
    path: '/user',
    component: User,
    meta: { roles: ['user'] }
  }
]

2. 在路由跳转时，判断当前用户是否有访问该路由的权限。可以通过获取当前用户的角色信息，与路由配置中的 meta 中的 roles 属性进行匹配。例如：

router.beforeEach((to, from, next) => {
  const currentUserRole = getCurrentUserRole() // 获取当前用户的角色信息
  const roles = to.meta.roles // 获取路由配置中的角色权限信息
  if (roles && roles.indexOf(currentUserRole) === -1) {
    // 如果当前用户没有访问该路由的权限，则跳转到未授权页面
    next('/unauthorized')
  } else {
    next()
  }
})

3. 在需要控制权限的组件中，可以根据当前用户的角色信息，来显示或隐藏相关内容。例如：

<template>
  <div>
    <h1 v-if='isAdmin'>管理员页面</h1>
    <h1 v-else-if='isUser'>普通用户页面</h1>
    <h1 v-else>未授权页面</h1>
  </div>
</template>

<script>
export default {
  computed: {
    isAdmin () {
      return getCurrentUserRole() === 'admin'
    },
    isUser () {
      return getCurrentUserRole() === 'user'
    }
  }
}
</script>

通过上述方案，可以实现基于 Vue Router 的角色权限控制，确保用户只能访问其具有权限的页面和操作。