uni-app 路由拦截
1. 路由拦截的第一种方式
思路：在需要鉴权的每一个页面中，判断 token 是否存在，存在的话，直接放行，否则就去登录页。
onClick(e) {
let token = uni.getStorageSync("TOKEN")
if(!token) { // 无token表示为登录，先去登录页
uni.navigateTo({
url: '/pages/login/login'
})
return
}
uni.navigateTo({
url: '/pages/center/center'
})
}
2. 简单方法，修改一下，navigateTo 等路由跳转的方法
将这段方法加入 man.js 中即可。
const methodToPatch = ['navigateTo', 'redirectTo', 'switchTab', 'navigateBack']
methodToPatch.map(item => {
const original = uni[item]
// needAuth 表示 是否需要 鉴权
uni[item] = function(opt = {}, needAuth) {
let token = uni.getStorageSync("TOKEN")
if (needAuth && !token) { // 需要登录且未登录
uni.navigateTo({
url: '/pages/login/login'
})
} else {
return original.call(this, opt)
}
}
})
调用数组里的方法
uni.switchTab({
url: "pages/center/center"
}, true)
备注：以上两种方法出自这个大佬写的文章，我这里只是根据自己的需要修改了一下。推荐各位可以去看一下原文章。
uniapp路由拦截 - 掘金 (juejin.cn)
3. 使用 uni-app 的拦截器实现路由拦截
const whiteList = ['/pages/login/login', '/pages/home/home', '/pages/category/category', '/pages/detail/detail']
const list = ["navigateTo", "redirectTo", "reLaunch", "switchTab"]
function hasPermission(url) {
// 在白名单中或有token，直接跳转
if (whiteList.indexOf(url) !== -1 || uni.getStorageSync("TOKEN")) {
return true;
}
return false;
}
list.forEach((item) => {
uni.addInterceptor(item, {
// 页面跳转前进行拦截, invoke根据返回值进行判断是否继续执行跳转
invoke(e) {
if (!hasPermission(e.url)) {
// 将用户的目标路径保存下来
// 这样可以实现 用户登录之后，直接跳转到目标页面
uni.setStorageSync("URL", e.url)
uni.navigateTo({
url: "/pages/login/login",
});
return false;
}
return true;
}
});
})
这个方法出自这个大佬的文章，这里只是将这几种思路汇总一下。推荐去看看原文章。
