一、什么是路由守卫？
路由守卫是前端开发中一种重要的安全机制，它允许开发者在用户访问特定页面或接口前进行拦截和验证。在Uniapp中，虽然官方没有直接提供类似Vue Router的完整路由守卫系统，但我们可以通过多种方式实现类似功能。
二、为什么需要接口路由守卫？
1. 权限控制：确保只有授权用户能访问特定页面
2. 数据安全：防止未经验证的请求访问敏感数据
3. 用户体验：在用户未登录时自动跳转到登录页
4. 日志记录：跟踪用户的导航行为
三、Uniapp实现路由守卫的三种方法
方法一：使用全局前置拦截器（推荐）
javascript
// main.js或单独的permission.js文件
import Vue from 'vue'
import { checkLogin } from '@/utils/auth'
// 注册全局前置守卫
uni.addInterceptor('navigateTo', {
invoke(args) {
// 需要登录的页面列表
const needLoginPages = ['/pages/user/index', '/pages/order/list']
// 检查目标页面是否需要登录
if (needLoginPages.includes(args.url.split('?')[0])) {
if (!checkLogin()) {
uni.showToast({
title: '请先登录',
icon: 'none'
})
uni.navigateTo({
url: '/pages/login/index'
})
return false // 阻止原导航
}
}
return true // 放行导航
},
fail(err) {
console.error('导航失败:', err)
}
})
方法二：使用页面生命周期钩子
javascript
// pages/user/index.vue
export default {
onLoad() {
if (!this.$store.getters.isLoggedIn) {
uni.redirectTo({
url: '/pages/login/index?redirect=' + encodeURIComponent(this.$route.fullPath)
})
return false;
}
this.fetchUserData()
},
methods: {
fetchUserData() { /* ... */ }
}
}
方法三：封装自定义跳转方法
javascript
// utils/router.js
const router = {
navigateTo(options) {
if (options.auth && !checkAuth()) {
return uni.navigateTo({
url: '/pages/login/index'
})
}
return uni.navigateTo(options)
}
}
export default router
// Vue组件中使用:
import router from '@/utils/router'
router.navigateTo({
url: '/pages/member',
auth: true
})
四、进阶技巧：动态权限控制
对于更复杂的权限系统，可以结合后端返回的用户角色信息：
javascript uni.addInterceptor('navigateTo', { invoke(args) { const userRoles = store.getters.userRoles || [] const routeMeta = getRouteMeta(args.url.split('?')[0])
if (routeMeta?.roles && !routeMeta.roles.some(role => userRoles.includes(role))){ uni.showModal({ title:'权限不足', content:'您没有访问该页面的权限'}) return false; } })})
function getRouteMeta(path){ /* ... */ }`
五、常见问题与解决方案
1. 循环重定向问题
- ❌错误场景：未登录→跳转登录页→检测到未登录...
- ✅解决方案：
jsx`if(to ==='/login')return true`
2.性能优化
-避免每次跳转都请求后端验证，合理使用本地缓存（注意设置过期时间）
3.H5端特殊处理
-H5端可能需要额外处理浏览器前进后退按钮：
window.addEventListener('popstate', handleBrowserBack)
4.微信小程序限制
-部分API不能拦截（如tabBar切换），需配合`onTabItemTap`
六、最佳实践建议
1.白名单优于黑名单:明确指定哪些路径需要保护而不是排除不需要保护的路径
2.统一错误处理:集中管理所有授权失败情况
3.友好的提示:告诉用户为什么不能访问而非直接跳转
4.测试所有场景:包括首次加载,刷新,直接URL输入等情况
通过以上几种方式,你可以在Uniapp项目中构建完善的接口和路由防护体系。根据项目复杂度选择合适方案——简单项目用全局拦截器足够,复杂RBAC系统则需要前后端配合实现完整的动态鉴权方案。
文章点评