uniapp 页面权限
uniapp 页面权限设置方法
uniapp本身没有内置的页面权限系统，但可以通过路由拦截、全局状态管理或后端接口验证实现权限控制。以下是几种常见方案：
路由拦截
在pages.json中配置页面路由，通过uni.addInterceptor拦截路由跳转，检查用户权限后再决定是否放行。
uni.addInterceptor('navigateTo', {
invoke(args) {
const allowedRoutes = ['/pages/home', '/pages/public']
if (!allowedRoutes.includes(args.url)) {
uni.showToast({ title: '无权限访问', icon: 'none' })
return false
}
return args
}
})自定义权限指令 创建全局指令或组件，在页面元素上控制显隐：
Vue.directive('auth', {
inserted(el, binding) {
const hasAuth = checkAuth(binding.value)
if (!hasAuth) el.parentNode.removeChild(el)
}
})模板中使用：
<button v-auth="'admin'">管理员按钮</button>后端验证方案 页面加载时请求接口验证权限：
onLoad() {
uni.request({
url: '/api/check_page_auth',
success(res) {
if (!res.data.hasAuth) uni.navigateBack()
}
})
}权限数据管理方案
Vuex状态管理 在store中维护权限数据：
const store = new Vuex.Store({
state: {
permissions: []
},
mutations: {
setPermissions(state, payload) {
state.permissions = payload
}
}
})本地缓存持久化
配合uni.setStorageSync实现权限持久化：
// 登录后存储权限
uni.setStorageSync('userPermissions', ['page1', 'page2'])
// 页面中检查
const hasPermission = uni.getStorageSync('userPermissions').includes('page1')动态路由实现
根据权限动态生成路由表：
function generateRoutes(permissions) {
return permissions.map(p => ({
path: `/${p}`,
style: { ... }
}))
}
// 更新pages.json
uni.setStorageSync('dynamicRoutes', generateRoutes(['page1']))最佳实践建议
- 前后端配合：前端做初步拦截，后端接口需做最终权限验证
- 权限粒度控制：建议采用RBAC（基于角色的访问控制）模型
- 错误处理：无权限时提供友好提示或跳转默认页
- 开发环境：通过环境变量区分权限验证的严格程度
扩展方案
插件化权限系统 封装权限插件：
const authPlugin = {
install(Vue) {
Vue.prototype.$auth = {
check(permission) {
// 实现检查逻辑
}
}
}
}
Vue.use(authPlugin)H5端特殊处理 针对浏览器端增加URL参数验证：
if (process.env.VUE_APP_PLATFORM === 'h5') {
window.addEventListener('popstate', checkPageAuth)
}
