uniapp权限分配
权限分配的基本概念
在UniApp中，权限分配通常涉及前端权限控制（如页面访问、按钮操作）和后端权限验证（如API接口权限）。前端权限可通过路由守卫、自定义指令等方式实现，后端权限需结合服务端逻辑（如角色、权限表设计）。
前端权限控制方案
路由守卫
通过uni.addInterceptor拦截路由跳转，结合本地存储（如uni.getStorageSync）判断用户是否有权限访问目标页面。
uni.addInterceptor('navigateTo', {
invoke(args) {
const requiredRole = 'admin';
const userRole = uni.getStorageSync('userRole');
if (userRole !== requiredRole) {
uni.showToast({ title: '无权限访问', icon: 'none' });
return false;
}
return args;
}
});自定义指令控制元素显隐
封装全局指令v-permission，动态控制DOM元素的显示。
Vue.directive('permission', {
inserted(el, binding) {
const hasPermission = checkPermission(binding.value);
if (!hasPermission) el.parentNode.removeChild(el);
}
});
// 使用示例：<button v-permission="'delete'">删除</button>后端权限验证设计
角色-权限模型
设计数据库表结构（如users、roles、permissions），通过中间表关联角色与权限。服务端接口需校验用户角色或权限标识。
接口权限中间件
在Node.js服务中示例：
function checkPermission(permission) {
return (req, res, next) => {
const userPermissions = req.user.permissions;
if (!userPermissions.includes(permission)) {
return res.status(403).json({ message: '无权操作' });
}
next();
};
}
// 使用：app.delete('/api/data', checkPermission('delete'), deleteHandler);多端权限同步
利用uniCloud的云函数统一权限逻辑，前端通过uniCloud.callFunction调用云函数时传递用户Token，云函数校验权限后返回数据或错误码。
动态菜单与权限映射
根据用户权限动态生成导航菜单。从服务端获取权限列表后，前端过滤路由配置：
const dynamicRoutes = allRoutes.filter(route => {
return userPermissions.includes(route.meta.permission);
});注意事项
- 前端权限控制仅作为用户体验优化，关键权限校验必须依赖服务端。
- 敏感操作（如删除、支付）需双重验证，前端限制+服务端拦截。
- 使用
uni.getSystemSetting获取设备权限状态（如摄像头、定位），需在manifest.json中声明所需权限。
通过上述方法可实现UniApp的细粒度权限分配，兼顾灵活性与安全性。
