uni-app 路由拦截器、请求拦截器

admin管理员组

文章数量:1633785

目录

一、路由拦截器

1、author.js文件（封装持久化存储、取值、移除的方法）

2、拦截器(跳转到登录页面时一定要写‘return false’)

（2）自己写的拦截器

二、请求拦截器

1、下载网址

2、使用方式

（1）拦截器request文件夹内的index.js文件中修改后端的baseUrl网址

（2）在api文件夹内的.js文件中引入拦截器request文件夹内的index.js文件

 （3）使用网络请求时，用service.request()的方法

---

一、路由拦截器

1、author.js文件（封装持久化存储、取值、移除的方法）

const authorKey = 'AUTHOR-KEY'
 
 export const setAuthor = (value)=>{
	 uni.setStorageSync(authorKey,value)
 }
 export const getAuthor = ()=>{
	 return uni.getStorageSync(authorKey)
 }
 
 export const removeAuthor = ()=>{
	 uni.removeStorageSync(authorKey)
 }

2、拦截器(跳转到登录页面时一定要写‘return false’)

不写return false会报错

	
import {getAuthor} from '@/utils/author.js'
export const useRouterInterceptor = () => {
	const whiteList = [
	  '/', // 注意入口页必须直接写 '/'
	  '/pages/login/login',
	  '/pages/home/home',
	  '/',
	  '/pages/detail/detail'
	]
	const arr = ['switchTab','navigateTo','redirectTo']
	arr.forEach(item=>{
		uni.addInterceptor(item, {
			invoke(args) {
				// 1. 白名单直接放行
				// 获取要跳转的页面路径（url去掉"?"和"?"后的参数）
				let url = args.url
				if(url && url.indexOf('?') !== -1){
					url = args.url.split('?')[0]
				}
				
				let pass = whiteList.some((item) => url === item)
				if(pass) return args
				// 2. 统一登录身份认证
				// 2.1 获取登录保存的token，如果存在放行，不存在跳转到登录界面
				let token = getAuthor()
				if(!token) {
					uni.showToast({
					  title: '请先登录',
					})
					uni.navigateTo({
					  url: "/pages/login/login"
					})
					return false
				}
				console.log('跳转前执行 ', args);
				return args
			},
		})
	})
	
}

（2）自己写的拦截器

import {getUser,removeUser} from '@/utils/user.js'
export const useRouterInterceptor = () => {

		//设置可以放行的路由白名单
		const whiteList = [
			'/', //首页路径为什么是/
			'/pages/category/category',
			'/pages/person/person',
			'/pages/login/login'
		]
		//设置路由拦截的操作
		const arr = ['navigateTo', 'redirectTo', 'switchTab']
		arr.forEach(item => {
					uni.addInterceptor(item, {
						invoke(args) {
							let url = args.url
							if (url && url.indexOf('?') != -1) {
								url = url.splite('?')[0]
							}
							if (whiteList.some(item => item === url)) return
							let token = getUser()	
							if (token)return
								uni.showToast({
								title: '请先登录',
							  })
							 uni.navigateTo({
							    url: "/pages/login/login"
							 	})
							return false
							}
					})
				})
}

二、请求拦截器

1、下载网址

uni-app请求拦截器-Typescript文档类资源-CSDN下载

2、使用方式

（1）拦截器request文件夹内的index.js文件中修改后端的baseUrl网址

（2）在api文件夹内的.js文件中引入拦截器request文件夹内的index.js文件

 （3）使用网络请求时，用service.request()的方法

// 请求banner资源
export const RequestBannerList=()=>{
    return service.request({
     url:'/api/shop/banner',
     method:'get',
     data:''
    })
 }

本文标签： 拦截器路由Uniapp