Vue Router 角色权限管理解决方案 - 实用指南 - 常规

Vue Router 是 Vue.js 官方的路由管理器，与 Vue.js 紧密配合，使单页应用构建变得非常简单。在实际开发中，我们经常需要对不同用户角色进行权限管理。例如，普通用户只能看到自己的数据，而管理员可以看到所有用户的数据。这时，我们需要在路由层面进行角色权限的控制。

以下是一种解决方案：

在 Vue Router 中定义路由时，可以为每个路由设置 'meta' 属性，用于存储路由的元数据。

例如，我们可以在路由中添加一个 'meta' 属性，用于存储该路由所需要的角色信息：

const routes = [
  {
    path: '/dashboard',
    component: Dashboard,
    meta: { roles: ['admin'] }
  },
  {
    path: '/profile',
    component: Profile,
    meta: { roles: ['user', 'admin'] }
  }
]

上面的代码中，'Dashboard' 路由只能被 'admin' 角色访问，而 'Profile' 路由可以被 'user' 和 'admin' 两个角色访问。

在路由跳转时，我们可以通过路由守卫来判断当前用户是否有权限访问该路由。路由守卫有多种类型，这里我们使用全局前置守卫 'beforeEach'。

在 'beforeEach' 中，我们可以获取当前路由的 'meta' 信息，然后根据当前用户的角色来判断是否有权限访问该路由。如果没有权限，则跳转到登录页或者其他提示页面。

router.beforeEach((to, from, next) => {
  const roles = getUserRoles() // 获取当前用户的角色信息
  const requiredRoles = to.meta.roles // 获取该路由所需要的角色信息

  if (requiredRoles.some(role => roles.includes(role))) {
    next() // 有权限，继续访问该路由
  } else {
    next('/login') // 无权限，跳转到登录页
  }
})

上面的代码中，我们使用了 'some' 方法来判断当前用户是否包含该路由所需要的角色。如果包含其中任意一个角色，则说明有权限访问该路由，否则就无权限。

在登录时，我们可以将当前用户的角色信息存储在本地存储中，以便在路由跳转时使用。

function login(username, password) {
  // 调用登录接口，获取当前用户的角色信息
  const roles = api.login(username, password)

  // 将角色信息存储在本地存储中
  localStorage.setItem('roles', JSON.stringify(roles))
}

在应用初始化时，我们需要从本地存储中获取当前用户的角色信息，并保存在一个全局变量中，以便在路由跳转时使用。

const roles = JSON.parse(localStorage.getItem('roles')) || []

new Vue({
  router,
  data: {
    roles: roles
  },
  render: h => h(App)
}).$mount('#app')

上面的代码中，我们将当前用户的角色信息保存在了一个名为 'roles' 的全局变量中，以便在路由跳转时使用。

综上所述，我们可以通过在 Vue Router 中使用 'meta' 属性存储路由的元数据，然后在路由跳转时通过路由守卫来判断当前用户是否有权限访问该路由。这样可以实现比较简单的角色权限管理。