uniapp通过uni.addInterceptor实现路由拦截

注：此拦截不能首次拦截路由跳转的方法（'switchTab', 'navigateTo', 'reLaunch', 'redirectTo'），拦截request请求api可以

app.vue 代码

javascript 复制代码

	import { onLaunch} from '@dcloudio/uni-app'
	import permission  from './utils/permission'
	onLaunch(()=>{
		console.log('我是APP蓝翅')
		uni.request({
			url: 'https://apifoxmock.com/m1/4728220-0-default/api/user/getBanner',
			method: 'GET',
			success: (res)=>{
				console.log('res')
			}
		})
		permission()
	})

permission 代码

javascript 复制代码

const checkAuth = function() {
	// 拦截器的API列表
	const apiList = ['switchTab', 'navigateTo', 'reLaunch', 'redirectTo']
	// 白名单列表
	const whitePath = ['/pages/logic/logic']
	apiList.map(item => {
		uni.addInterceptor(item, {
			invoke(args) {
				console.log(args)
				// 取出当前路由地址
				const path = args.url.split('?')[0]
				// 此处通过token来模拟是否登录，具体的根据项目来判断
				const token = uni.getStorageSync('token')
				
				console.log(token)
				// 判断是否在白名单内
				if (whitePath.includes(path)) {
					console.log('不需要登录')
					return 
				} else {
					if (token) {
						console.log('登录')
						// 登录了
						return
					} else {
						console.log('没有登录')
						// 未登录
						uni.navigateTo({
							url: `/pages/logic/logic?redirectTo=${encodeURIComponent(args.url)}`
						})
						return false
					}
				}

			}
		})
	})
}

export default checkAuth

登录简单实现代码

javascript 复制代码

<template>
	<view class="page-wrap">
		用户名：<input type="text" border="surround" v-model="username" />
		<up-button type="primary" @click="login">登录</up-button>
	</view>
</template>

<script setup>
	import {
		ref
	} from 'vue'
	import {
		onShow,
		onLoad
	} from '@dcloudio/uni-app'
	const username = ref('')
	const redirectPath = ref('')
	onLoad((p)=>{
		console.log(p)
	})
	onShow((props) => {
		console.log(props)
		console.log(redirectPath.value)
		console.log(getCurrentPages())
		const page = getCurrentPages()
		let currentPage = page[page.length - 1]
		redirectPath.value = currentPage?.$page?.options?.redirectTo || ''
	})
	const login = () => {
		if (username.value) {
			uni.setStorageSync('token', username)
			console.log((redirectPath.value))
			uni.redirectTo({
				url: decodeURIComponent(redirectPath.value),
				fail: (err) => {
					console.log(err)
					uni.switchTab({
						url: decodeURIComponent(redirectPath.value),
					})
				}
			})
		} else {
			uni.showToast({
				title: '请输入用户名'
			})
		}
	}
</script>

<style scoped>
	.page-wrap {
		padding: 20rpx;
	}
</style>