uniapp 权限分配

uniapp 权限分配的实现方法

在 uniapp 中实现权限分配通常涉及前端路由控制、接口权限校验和动态菜单生成。以下是几种常见的实现方式：

路由拦截与权限校验

通过 uni.addInterceptor 拦截路由跳转，结合本地存储（如 uni.getStorageSync）检查用户权限。示例代码：

uni.addInterceptor('navigateTo', {
  invoke(args) {
    const requiredPermission = args.url.split('?')[0];
    const userPermissions = uni.getStorageSync('userPermissions');
    if (!userPermissions.includes(requiredPermission)) {
      uni.showToast({ title: '无权限访问', icon: 'none' });
      return false;
    }
    return true;
  }
});

动态菜单生成

根据后端返回的权限列表动态渲染菜单。在 onLaunch 生命周期中获取权限数据：

onLaunch() {
  uni.request({
    url: 'https://api.example.com/permissions',
    success: (res) => {
      uni.setStorageSync('menuData', res.data.menus);
    }
  });
}

接口权限控制

在请求拦截器中添加权限校验。使用 uni.request 的拦截器：

uni.addInterceptor('request', {
  invoke(args) {
    const requiredAuth = args.header?.X-Required-Auth;
    if (requiredAuth && !checkAuth(requiredAuth)) {
      return Promise.reject(new Error('无接口访问权限'));
    }
  }
});

后台管理系统权限方案

对于后台类项目，推荐采用以下架构：

RBAC 模型实现

• 角色表：定义管理员、运营等角色
• 权限表：存储页面/操作权限标识
• 用户角色关联表：建立用户与角色的多对多关系

前端实现要点

1. 使用 uni.getStorageSync('role') 获取当前角色
2. 通过 v-if="hasPermission('user:delete')" 控制按钮显示
3. 动态生成侧边栏菜单，过滤无权限项

跨平台权限差异处理

不同平台的权限申请方式需特殊处理：

Android 权限

<!-- manifest.json 配置 -->
"app-plus": {
  "distribute": {
    "android": {
      "permissions": [
        "<uses-permission android:name=\"android.permission.CAMERA\"/>"
      ]
    }
  }
}

iOS 权限

<!-- manifest.json 配置 -->
"ios": {
  "privacyDescription": {
    "NSPhotoLibraryUsageDescription": "需要相册权限上传图片"
  }
}

最佳实践建议

• 权限数据应加密存储避免伪造
• 重要操作需后端二次校验权限
• 使用权限组简化多权限管理
• 开发环境可配置权限模拟开关

对于复杂系统，建议结合 uniCloud 开发自定义权限中间件，实现统一的权限管理服务。