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>

后端动态权限方案

1. 用户登录后获取权限列表
2. 前端存储权限标识（Vuex或本地存储）
3. 页面加载时校验权限：

   // 页面 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实现完整鉴权流程。