我们在写uniapp的项目时如果不用第三方插件,用官网的路由跳转,就需要自己用官网的一个api制作路由拦截器。贴一张官网的图

 贴个官网链接:uni.addInterceptor(STRING, OBJECT) | uni-app官网 (dcloud.net.cn)icon-default.png?t=N7T8https://uniapp.dcloud.net.cn/api/interceptor.html#

第一步:新建一个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浏览器页面地址栏直跳转

Logo

华为开发者空间,是为全球开发者打造的专属开发空间,汇聚了华为优质开发资源及工具,致力于让每一位开发者拥有一台云主机,基于华为根生态开发、创新。

更多推荐