使用 Vue Router 实现基于角色的重定向控制

使用 Vue Router 实现基于角色的重定向控制

在开发 Web 应用程序时，经常会遇到需要根据用户角色来限制访问权限的情况。Vue Router 是一个非常方便的路由管理库，可以帮助我们在 Vue.js 应用程序中实现路由功能。本文将介绍如何使用 Vue Router 实现基于角色的重定向控制，并提供具体的代码示例。

首先，我们需要安装和配置 Vue Router。可以通过 npm 或 yarn 安装 Vue Router：

npm install vue-router

安装完毕后，在主 Vue.js 实例中引入 Vue Router：

import Vue from 'vue'
import VueRouter from 'vue-router'

Vue.use(VueRouter)

然后，我们需要定义应用程序的路由配置。在路由配置中，我们可以指定每个路由的路径、组件以及需要的权限角色。

const routes = [
  {
    path: '/',
    name: 'Home',
    component: Home,
    meta: { requiresAuth: true, requiredRoles: ['admin', 'user'] }
  },
  {
    path: '/admin',
    name: 'Admin',
    component: Admin,
    meta: { requiresAuth: true, requiredRoles: ['admin'] }
  },
  {
    path: '/user',
    name: 'User',
    component: User,
    meta: { requiresAuth: true, requiredRoles: ['user'] }
  },
  {
    path: '/login',
    name: 'Login',
    component: Login
  }
]

在上述代码中，我们定义了四个路由，分别是首页（Home）、管理员页面（Admin）、用户页面（User）和登录页面（Login）。对于需要权限控制的路由，我们使用 meta 字段来指定需要的权限角色。在本例中，'admin' 角色可以访问管理员页面，'user' 角色可以访问用户页面，而首页则是需要 'admin' 和 'user' 两个角色都拥有的权限。

接下来，我们需要在 Vue Router 实例中配置路由：

const router = new VueRouter({
  routes
})

然后，我们可以使用 Vue Router 的全局前置守卫来实现基于角色的重定向控制。在每次路由导航前，我们都会检查用户的角色是否满足访问该路由所需的角色。

router.beforeEach((to, from, next) => {
  const requiresAuth = to.matched.some(record => record.meta.requiresAuth)
  const requiredRoles = to.meta.requiredRoles

  const currentUser = getUserFromLocalStorage()

  if (requiresAuth && !currentUser) {
    next({
      path: '/login',
      query: { redirect: to.fullPath }
    })
  } else if (requiresAuth && !requiredRoles.includes(currentUser.role)) {
    next({
      path: '/',
      query: { redirect: to.fullPath }
    })
  } else {
    next()
  }
})

function getUserFromLocalStorage() {
  // 从本地存储中获取当前用户的角色信息
  // 这里需要根据你的实际情况来实现
  // 例如从 cookie 或 sessionStorage 中获取
  return { role: 'admin' }
}

在上述代码中，我们通过 beforeEach 守卫来实现权限控制。首先，我们检查用户是否已经登录（requiresAuth），如果未登录则重定向到登录页面，并传递当前页面的路径作为重定向参数（query.redirect）。然后，我们检查用户的角色是否满足访问该路由所需的角色，如果角色不符合要求，则重定向至首页。

最后，我们需要将路由实例挂载到 Vue.js 应用程序中：

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

至此，我们已经完成了使用 Vue Router 实现基于角色的重定向控制的过程。通过上述代码示例，我们可以根据用户的角色限制其对不同页面的访问权限。这样，就可以实现更加灵活和安全的 Web 应用程序开发。