admin管理员组文章数量:1633801
目录
一、路由拦截器
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:''
})
}
版权声明:本文标题:uni-app 路由拦截器、请求拦截器 内容由热心网友自发贡献,该文观点仅代表作者本人, 转载请联系作者并注明出处:https://m.elefans.com/xitong/1729176686a1188809.html, 本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容,一经查实,本站将立刻删除。
发表评论