uni-simple-router 优雅实现服务端控制页面权限动态路由-CSDN博客

本文链接：https://blog.csdn.net/qq_37919080/article/details/132092413

本文介绍了如何使用uni-simple-router结合uni-app，在前端优雅地实现服务端控制页面权限的动态路由。通过角色权限定义、定义路由表、与后端约定数据结构，以及根据权限名生成对应的路由，实现不同角色对特定页面的访问控制。示例中展示了管理员、经理和员工的权限差异，并提供了相关代码示例。

摘要由CSDN通过智能技术生成

权限访问管理在日常开发中扮演着重要角色。无论是控制不同角色访问特定页面、模块，还是管理按钮级别的权限，都需要一个灵活的方案来实现。在uni-app中，我们可以结合uni-simple-router来达成这个目标。

现在我们假设系统中我们有三个不同的角色，分别是：管理员（admin）、经理（manager）和员工（employee）。然后根据不同角色拥有不同的权限来举例详细说明，假设我们有以下三个页面：Dashboard、UserManagement和Settings。

角色权限定义

管理员（admin）：拥有访问所有页面的权限。
经理（manager）：可以访问Dashboard和UserManagement页面。
员工（employee）：只能访问Dashboard页面。

定义路由表

当准备让后台控制所有页面权限时，首先需要与后台人员约定好权限数据结构，以便有效管理和控制用户权限。为了简化示例并降低复杂度，我们可以采用一个最简单的示例来演示整个流程。

首先我们可观察到三个用户之间都共享一个名为Dashboard的页面，但每个用户还有各自专属的页面。

为了实现页面权限的动态管理，我们可以将Dashboard作为应用的起始静态页面，这意味着所有用户都可以访问它。其他用户专属页面可以在用户完成登录后，通过异步加载的方式动态添加到路由管理器中，从而实现按需加载的效果。

我们先构建最基本的路由表及插件配置如下：

routes.js

import {
   
    __dynamicImportComponent__
} from '@/uni-simple-router'

const Dashboard = __dynamicImportComponent__(`@/pages/dashboard.vue`,{
    pageType:`top` })
const Settings = __dynamicImportComponent__(`@/pages/settings.vue`,{
    pageType:`top` })
const UserManagement = __dynamicImportComponent__(`@/pages/userManagement.vue`,{
    pageType:`top` })
export const NotFound404 = __dynamicImportComponent__(`@/pages/404.vue`,{
    pageType:`top` })
export const Login = __dynamicImportComponent__(