vue-element-admin：从权限角度探索登录后页面渲染

前端

2023-10-22 22:55:37

欢迎来到我们的编程之旅的第 9 站！今天，我们将深入探究 vue-element-admin，发现它在用户登录后动态生成页面路由的强大功能。

权限驱动的页面构建

在现代应用程序中，根据用户的权限级别定制页面至关重要。vue-element-admin 巧妙地实现了这一点，通过获取登录用户的详细信息并根据其权限生成动态路由。

获取用户信息

当用户成功登录时，vue-element-admin 从服务器获取其用户信息。这些信息通常包括用户 ID、用户名、角色和权限列表。获取此数据对于确定用户可以访问哪些页面和功能至关重要。

生成基于权限的路由

拥有了用户信息后，vue-element-admin 根据用户的权限生成页面路由。它将用户拥有的权限与定义的路由映射到一起，从而确定用户可以访问哪些页面。

此过程确保用户只能看到他们有权访问的页面。例如，管理员用户可能可以看到所有页面，而普通用户可能只能看到与其角色相关的页面。

步骤详解

让我们深入了解 vue-element-admin 生成基于权限的路由的步骤：

获取用户信息： 从服务器获取登录用户的用户信息。
获取用户权限： 从用户信息中提取用户拥有的权限列表。
匹配路由： 将用户的权限与定义的路由进行匹配。
生成动态路由： 根据匹配的权限生成用户可以访问的页面路由。
更新路由表： 将动态路由添加到应用程序的路由表中。

代码示例

以下是 vue-element-admin 中生成基于权限的路由的一个代码示例：

import { getUserInfo } from '@/api/user'

const router = new VueRouter({
  routes: [
    // ... 其他路由
    {
      path: '/dashboard',
      component: () => import('@/views/Dashboard'),
      meta: {
        requiresAuth: true,
        permissions: ['admin', 'user']
      }
    }
  ]
})

router.beforeEach((to, from, next) => {
  // 如果需要权限才能访问
  if (to.meta.requiresAuth) {
    getUserInfo().then(res => {
      if (res.data.permissions.some(p => to.meta.permissions.includes(p))) {
        next()
      } else {
        // 无权限，跳转到 403 页面
        next({ path: '/403' })
      }
    }).catch(() => {
      // 获取用户信息失败，跳转到登录页
      next({ path: '/login' })
    })
  } else {
    next()
  }
})