uniapp 跳转页面拦截

### UniApp 中实现页面跳转拦截的方法 在 UniApp 开发中，可以通过 `uni.addInterceptor` 方法实现页面跳转时的拦截功能。此方法允许开发者在页面切换之前执行特定逻辑，例如权限校验或路由守卫。 #### 使用 `uni.addInterceptor` 实现页面跳转拦截 通过创建一个专门的拦截器文件（如 `interceptor.js`），可以集中管理所有的页面跳转逻辑。以下是具体实现方式： 1. **新建拦截器文件** 在项目根目录下的某个文件夹（如 `router` 文件夹）中创建名为 `interceptor.js` 的文件[^1]。 2. **编写拦截逻辑** 下面是一个完整的示例代码，展示如何利用 `uni.addInterceptor` 对页面跳转进行拦截并完成登录状态检查： ```javascript // router/interceptor.js export default function setupInterceptors() { uni.addInterceptor('navigateTo', { invoke(args) { console.log('即将跳转:', args); }, success(args) { checkLoginStatus(args); // 执行登录状态检查 } }); uni.addInterceptor('redirectTo', { success(args) { checkLoginStatus(args); // 执行登录状态检查 } }); function checkLoginStatus(pageArgs) { const token = uni.getStorageSync('token'); // 获取本地存储中的 token if (!token && pageArgs.url.includes('login')) { return; // 如果目标页面是登录页，则不拦截 } if (!token) { // 用户未登录，重定向至登录页 uni.redirectTo({ url: '/pages/login/login' }); } else { // 已登录，继续跳转 console.log('已登录，正常跳转'); } } } ``` 3. **引入拦截器** 将拦截器初始化函数导入到项目的入口文件（通常是 `App.vue` 或 `main.js`）中，并调用它以启动拦截机制。 ```javascript import interceptor from './router/interceptor'; setupInterceptors(); ``` 以上代码实现了对 `navigateTo` 和 `redirectTo` API 的拦截，并在每次页面跳转前验证用户的登录状态。如果用户未登录且尝试访问受保护页面，则自动将其重定向到登录页面[^1]。 --- #### 结合 Meta 数据实现更复杂的权限控制 为了进一步增强灵活性，可以在页面配置文件（如 `pages.json`）中为各个页面添加自定义属性（Meta 数据）。这些数据可用于标识哪些页面需要登录或其他特殊权限。 以下是一个基于 Meta 数据的示例实现： ```javascript // App.vue 或 main.js uniRouter.beforeEach((to, from, next) => { if (to.meta?.requireAuth) { // 检查目标页面是否需要登录校验 const token = uni.getStorageSync('token'); // 获取本地存储的 token if (token) { next(); // 已登录，放行 } else { next('/pages/login/login'); // 未登录，跳转到登录页 } } else { next(); // 页面无需登录校验，直接放行 } }); ``` 在此基础上，还可以扩展更多条件判断逻辑，例如角色权限、IP 地址限制等[^3]。 --- #### 注意事项 - 确保拦截器逻辑不会影响用户体验，例如频繁弹窗提醒或不必要的延迟。 - 若使用 H5 平台开发，需注意浏览器行为可能导致部分拦截失效，建议测试兼容性[^2]。 - 当涉及敏感操作（如支付、修改密码）时，应额外增加服务器端校验，防止客户端被篡改。 ---