uniapp 页面权限
uniapp 页面权限实现方法
在uniapp中实现页面权限控制通常涉及路由拦截、全局验证和动态权限管理。以下是几种常见方案：
路由拦截与导航守卫
通过uni.addInterceptor拦截页面跳转，在跳转前验证权限：
// main.js 或 App.vue
uni.addInterceptor('navigateTo', {
invoke(args) {
const needLogin = ['/pages/user/center', '/pages/order/list']
if (needLogin.includes(args.url) && !hasLogin()) {
uni.showToast({ title: '请先登录', icon: 'none' })
return { url: '/pages/login/index' } // 重定向到登录页
}
return args
}
})自定义权限指令
创建全局指令控制元素显示：
// main.js
Vue.directive('auth', {
inserted(el, binding) {
if (!checkPermission(binding.value)) {
el.parentNode.removeChild(el)
}
}
})
// 使用方式
<button v-auth="'admin'">管理员按钮</button>后端动态权限方案
- 用户登录后获取权限列表
- 前端存储权限标识（Vuex或本地存储）
- 页面加载时校验权限：
// 页面 onLoad 钩子 onLoad() { if (!this.$store.getters.hasPermission('pageA')) { uni.redirectTo({ url: '/pages/error/403' }) } }
权限数据存储结构示例
建议采用扁平化权限标识：
// 用户权限数据示例
{
permissions: [
'page:home',
'page:user',
'button:delete'
]
}特殊场景处理
TabBar页面权限需特殊处理，因uni.switchTab无法拦截：
// 在App.vue的onLaunch中检测
uni.onTabBarMidButtonTap(() => {
if (!hasPermission('tabCenter')) {
uni.navigateTo({ url: '/pages/auth/tips' })
}
})注意事项
- 敏感权限需后端二次验证
- H5端注意路由守卫与History模式兼容
- 小程序端需处理页面栈限制
- 权限变更时及时更新本地存储
以上方案可根据实际项目需求组合使用，建议配合JWT或OAuth2.0实现完整鉴权流程。
