uniapp原生路由拦截
手把手教你写uniapp官网原生路由拦截器教程,无需使用第三方插件。
·
我们在写uniapp的项目时如果不用第三方插件,用官网的路由跳转,就需要自己用官网的一个api制作路由拦截器。贴一张官网的图
第一步:新建一个js文件
拦截的逻辑是,先判断是不是白名单页面,是的话放行,不是的白名单页面判断该有没有拿到token,有token的话就放行,没有的话就是没登录跳转到登录页面让其登录。
import {
getToken
} from '@/utils/auth' //用于检查是否有token的函数
// 登录页面
const loginPage = "/pages/Login/Login"
// 页面白名单
const whiteList = [
'/pages/Login/Login', '/pages/common/webview/index'
]
// 检查地址白名单
function checkWhite(url) {
const path = url.split('?')[0]
return whiteList.indexOf(path) !== -1
}
// 页面跳转验证拦截器
let list = ["navigateTo", "redirectTo", "reLaunch", "switchTab"]
list.forEach(item => {
uni.addInterceptor(item, {
invoke(to) {
if(checkWhite(to.url)){
return true
}else{
if(getToken()){
return true
}else{
uni.reLaunch({
url: "/pages/Login/Login"
})
return true
}
}
},
fail(err) {
console.log(err)
}
})
})
贴一下获取token的函数,这就是一个在本地存储中获取token的函数封装,其实也可以直接在permission页面直接用 uni.getStorageSync('这里放token的属性名') 获取token
第二步:在全局main.js文件中导入
第三步:在app.vue文件中监听h5浏览器页面地址栏直跳转
更多推荐
已为社区贡献1条内容
所有评论(0)