当前位置：首页 > uni-app

uniapp权限分配

2026-02-05 22:33:54uni-app

uniapp权限分配方法

在uniapp中实现权限分配通常涉及前端界面控制、后端接口验证以及多端适配。以下是常见的实现方案：

前端权限控制方案

路由拦截通过uni.addInterceptor拦截路由跳转，结合本地存储的权限标识判断是否允许访问：

uni.addInterceptor('navigateTo', {
invoke(args) {
 const requiredPermission = getRoutePermission(args.url)
 if (!checkUserPermission(requiredPermission)) {
   uni.showToast({ title: '无权限访问', icon: 'none' })
   return false
 }
 return true
}
})

组件级权限使用自定义指令或条件渲染控制组件显示：

<template>
<button v-if="$hasPermission('user:delete')">删除用户</button>
</template>

全局权限方法在main.js中挂载权限验证方法：

Vue.prototype.$hasPermission = (permission) => {
const userPermissions = uni.getStorageSync('userPermissions')
return userPermissions.includes(permission)
}

后端接口权限验证

接口中间件后端需实现权限中间件验证请求：

// Express示例
app.use('/admin', (req, res, next) => {
if (!req.user.permissions.includes('admin')) {
 return res.status(403).json({ error: 'Forbidden' })
}
next()
})

JWT权限声明在token中嵌入权限声明：

{
"sub": "user123",
"permissions": ["user:read", "user:create"]
}

多端适配注意事项

小程序需在manifest.json声明所需权限：

{
"mp-weixin": {
 "permission": {
   "scope.userLocation": {
     "desc": "需要获取位置权限"
   }
 }
}
}

App端需使用原生插件处理动态权限请求，如：

uni.request({
url: 'https://api.example.com',
success() {
 // 处理成功逻辑
},
fail(err) {
 if (err.errCode === 403) {
   uni.showModal({ content: '权限不足' })
 }
}
})

权限数据管理

采用RBAC模型设计：

角色表(roles)
权限表(permissions)
用户角色关联表(user_roles)
角色权限关联表(role_permissions)

权限标识建议格式： 资源类型:操作，如：

user:create
order:delete
report:export

缓存策略优化

用户登录后立即获取权限数据并缓存：

uni.setStorage({
key: 'userPermissions',
data: ['user:read', 'order:create']
})

定时刷新机制：

setInterval(() => {
refreshPermissions()
}, 3600000) // 每小时刷新

调试与监控

开发阶段开启权限调试模式：

// main.js
Vue.config.errorHandler = (err) => {
if (err.message.includes('permission')) {
 console.warn('权限错误:', err)
}
}

生产环境收集权限错误日志：

uni.onError((error) => {
if (error.type === 'permission') {
 uni.reportAnalytics('permission_denied', {
   page: getCurrentPages()[0].route,
   permission: error.permission
 })
}
})

uniapp权限分配