uniapp拦截器uni.addInterceptor会拦截带参数的URL的BUG

解决uni-app拦截器对带参数URL的处理问题,

原创已于 2024-04-22 16:38:46 修改 · 1.1k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#uni-app #bug #前端

于 2023-11-08 15:57:29 首次发布

文章讲述了在uni-app中，如何通过添加特定代码来避免拦截器拦截带有参数的URL，只需检查URL的基础部分，而不是完整路径。

拦截器uni.addInterceptor会拦截带参数的URL 。
在白名单设置了通行：/page/index/detail ，如果在跳转在URL中有参数，如/page/index/detail?id=12,则会被拦截器拦截。
不过可加两行代码即可解决这个问题：
在uni.addInterceptor 代码段中，把

if(!hasPermission(e.url)){

修改为：

const url = e.url.split('?')[0]
if(!hasPermission(url)){

即可。
全部代码如下：


import systemConfig from '@/config/config.js';
// 页面白名单，不受拦截
const whiteList = systemConfig.whiteList 
function hasPermission (url) {
	let islogin = uni.getStorageSync(systemConfig.token );//isLogin是登录成功后在本地存储登录标识，存储一个能够判断用户登录的唯一标识就行
    // 在白名单中或有登录判断条件可以直接跳转
    if(whiteList.indexOf(url) !== -1 || islogin) {
		//console.log('通过')
        return true 
    } 
	//console.log('失败')
    return false
}
uni.addInterceptor('navigateTo', {
    // 页面跳转前进行拦截, invoke根据返回值进行判断是否继续执行跳转
    invoke (e) {
		const url = e.url.split('?')[0]
        if(!hasPermission(url)){
            uni.navigateTo({
                url:systemConfig.login_page 
            })
            return false
        }
        return true
    },
    success (e) {
		
    }
})
 
uni.addInterceptor('switchTab', {
    // tabbar页面跳转前进行拦截
    invoke (e) {
		
		const url = e.url.split('?')[0]
		if(!hasPermission(url)){
            uni.navigateTo({
                url: systemConfig.login_page 
            })
			//console.log('不在白名单内')
            return false
        }
		//console.log('在白名单内')
        return true
    },
    success (e) {
		
    }
})

/config/config.js代码如下：

let config = {
	//不拦截页面路径
    whiteList: [
    	'/pages/public/login',
		'/pages/public/forget_password',
		'/pages/public/register',
		'/pages/public/phoneLogin',
		'/pages/index/index',
		'/pages/index/list',
		'/pages/subPack/index/detail',
		//一行一个
    ],
    token : 'token', //本地存储token的变量名
    login_page : '/pages/public/login',  //拦截后跳转的登陆页路径
}
export default config