Uniapp小程序路由拦截器、navigator不被拦截

• 添加一个文件interceptor.js（名字随意、位置随意）

import store from "./store";

let config = {
//白名单页面
whiteList: [
"/pages/login/login",
"/pages/guides/guides",

"/pages/index/index"
],
//登录页
loginPage: "/pages/login/login"
}

export default async  function interceptor() {

/**
 * 页面跳转拦截器
 */
let list = ["navigateTo", "redirectTo", "reLaunch", "switchTab"];
// console.log("list",list);
list.forEach(item => {//遍历各个方式，进行拦截
uni.addInterceptor(item, {
invoke(e) { // 调用前拦截

//这里token的获取，看各人
const token = store.state.user.token

//获取要跳转的页面路径（url去掉"?"和"?"后的参数）
let url = e.url.split('?')[0];

let notNeed = config.whiteList.includes(url)

// 如果在whiteList里面就不需要登录
if (notNeed) {
return e
} else {
//需要登录的页面
if (!token) {

uni.navigateTo({
url: config.loginPage
})
return false
} else {
return e
}
}
 
},
fail(err) { // 失败回调拦截 
console.log(err);
 
}
})
})
 
 
}

注册拦截器，App.vue中

<script>
import interceptor from "./interceptor.js"
export default {
onLaunch: function() {
console.warn('当前组件仅支持 uni_modules 目录结构 ，请升级 HBuilderX 到 3.1.0 版本以上！')
console.log('App Launch')
interceptor();//只需要在小程序初始化时注册一次
},
onShow: function() {
console.log('App Show')

},
onHide: function() {
console.log('App Hide')
}
}
</script>

• 注意点
  <navigator class="setting" url="/pages/temp/temp">
  这样貌似不被拦截。解决方案是：添加click方法
  <navigator class="setting" @click="goSetting">

原文地址：https://blog.csdn.net/maktoub/article/details/137647070

免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！