- 添加一个文件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">
