uni-app如何配置uni-simple-router进行路由拦截

安装与初始化必须做对三件事：不装错、不漏挂、不跳过初始化，否则 beforeEach 不会触发；需同时安装 uni-simple-router 和 uni-read-pages，main.js 中 H5 端用 RouterMount(app, '#app')，非 H5 端保留 app.$mount()。

安装与初始化必须做对的三件事

不装错、不漏挂、不跳过初始化，否则 beforeEach 根本不会触发。常见错误是只装了 uni-simple-router 却没装 uni-read-pages（尤其需要自动读取 pages.json 时），或在 main.js 里仍用 app.$mount() 而没按 v1.3.5+ 规范改用 RouterMount。

1. 执行 npm install uni-simple-router uni-read-pages（后者用于自动生成路由表）
2. router/index.js 中必须调用 createRouter，且 routes 不能为空数组——哪怕先填一个兜底路由
3. main.js 中：H5 端必须用 RouterMount(app, '#app')；非 H5 端才保留 app.$mount()

登录拦截写法：别硬判 token，要兼顾跳转语义

直接读 uni.getStorageSync('token') 很常见，但容易忽略两点：一是未登录时跳转目标页需带 NAVTYPE: 'replaceAll' 防止返回黑屏；二是放行逻辑必须覆盖所有免登录路径（如登录页、404、注册页），否则会死循环。

1. 在路由配置中给登录页加 meta: { guestOnly: true }，在守卫里用 to.meta.guestOnly 显式放行
2. 判断条件建议写成：if (to.meta.requiresAuth && !token) { next({ path: '/pages/login/login', NAVTYPE: 'replaceAll' }) }
3. 避免只写 next('/login') —— 这等价于 push，用户点返回键会回到被拦截页，体验断裂

权限控制别只靠 meta.roles，得结合后端动态校验

meta.roles 是静态标记，适合角色固定、页面少的场景。一旦权限粒度变细（比如“编辑某类设备”），仅靠前端配置无法保证安全。真实项目里，beforeEach 应该先查缓存权限，没命中再发请求，且必须设超时和降级策略。

1. 不要写 if (to.meta.permission === 'device.edit' && !hasPermission('device.edit')) 这种硬编码校验
2. 推荐做法：在守卫里调用 checkPermission(to.meta.permissionKey)，该函数内部优先查 uni.getStorageSync('permissions')，无则调 API 获取并缓存
3. 注意 next(false) 会中断导航，但小程序端可能触发白屏，建议搭配 uni.showToast 提示后主动 next({ path: '/pages/404/index' })

uni.switchTab 和 navigateBack 拦截不了？这是设计限制，不是 bug

uni-simple-router 的 beforeEach 对 uni.switchTab 和 uni.navigateBack 无效——因为这两个 API 不走插件封装的跳转链路。想统一控制 tabbar 切换或返回行为，只能手动重写原生方法，或改用自定义 tabbar 组件。

1. 重写方案示例：const originalSwitchTab = uni.switchTab; uni.switchTab = function(options) { /* 插入拦截逻辑 */ return originalSwitchTab.call(this, options); }
2. 更稳妥的做法：禁用原生 tabbar，在页面顶部用 view + tab-bar 组件模拟，所有切换都走 this.$Router.pushTab()
3. 注意：重写必须在 main.js 最早执行，且需 patch 所有平台（APP、小程序、H5）的对应 API

实际跑通的关键不在代码多寡，而在初始化时机、跳转语义处理、以及接受「原生 API 拦截存在盲区」这个事实。很多问题不是配置错，而是误以为它能拦截一切。