uni-app三部曲之三: 路由拦截

1.引言

路由拦截,个人理解就是在页面跳转的时候,增加一级拦截器,实现一些自定义的功能,其中最重要的就是判断跳转的页面是否需要登录后查看,如果需要登录后查看且此时系统并未登录,就需要跳转到登录页,登录后跳转到原来想要访问的页面。

2.实现

uni-app的路由跳转分别是uni.navigateTo:保留当前页面,跳转到应用内的某个页面,使用uni.navigateBack可以返回到原页面;uni.redirectTo:关闭当前页面,跳转到应用内的某个页面;uni.reLaunch:关闭所有页面,打开到应用内的某个页面;uni.switchTab:跳转到 tabBar 页面,并关闭其他所有非 tabBar 页面;uni.navigateBack:关闭当前页面,返回上一页面或多级页面,可通过 getCurrentPages() 获取当前的页面栈,决定需要返回几层。

在进行路由跳转时,通过uni.addInterceptor,添加拦截器,实现路由拦截。

拦截是否需要登录的基本思路是通过pages.json文件对应的配置needLogin,进行页面的配置,在拦截时,找到有此配置的所有页面,得到所有页面的路径,和本次访问的路径进行匹配,如果匹配成功,则判断当前是否是登录状态,若没有登录,跳转到登录界面,进行登录。

3.代码

代码主要分为拦截器代码,登录页pages配置,登录页登录按钮功能。

1.拦截器代码

/*** by 菲鸽 on 2024-03-06* 路由拦截,通常也是登录拦截* 可以设置路由白名单,或者黑名单,看业务需要选哪一个* 我这里应为大部分都可以随便进入,所以使用黑名单*/
import { useUserStore } from '@/store'
import { getNeedLoginPages, needLoginPages as _needLoginPages } from '@/utils'
import { getAccessToken } from '@/utils/auth'// 登录页面路径
const loginRoute = '/pages/login/index'const isLogined = () => {const userStore = useUserStore()return userStore.userInfo.isLogin && getAccessToken()
}const isDev = import.meta.env.DEV// 黑名单登录拦截器 - (适用于大部分页面不需要登录,少部分页面需要登录)
const navigateToInterceptor = {// 注意,这里的url是 '/' 开头的,如 '/pages/index/index',跟 'pages.json' 里面的 path 不同invoke({ url }: { url: string }) {console.log(url) // /pages/route-interceptor/index?name=feige&age=30const path = url.split('?')[0]let needLoginPages: string[] = []// 为了防止开发时出现BUG,这里每次都获取一下。生产环境可以移到函数外,性能更好if (isDev) {needLoginPages = getNeedLoginPages()} else {needLoginPages = _needLoginPages}const isNeedLogin = needLoginPages.includes(path)if (!isNeedLogin || isLogined()) {return true}const redirectRoute = `${loginRoute}?redirect=${encodeURIComponent(url)}`console.log(redirectRoute)uni.navigateTo({ url: redirectRoute })return false},
}export const routeInterceptor = {install() {uni.addInterceptor('navigateTo', navigateToInterceptor)uni.addInterceptor('reLaunch', navigateToInterceptor)uni.addInterceptor('redirectTo', navigateToInterceptor)},
}

2.辅助函数代码

import { pages, subPackages, tabBar } from '@/pages.json'
export const getLastPage = () => {// getCurrentPages() 至少有1个元素,所以不再额外判断// const lastPage = getCurrentPages().at(-1)// 上面那个在低版本安卓中打包回报错,所以改用下面这个【虽然我加了src/interceptions/prototype.ts,但依然报错】const pages = getCurrentPages()return pages[pages.length - 1]
}/** 判断当前页面是否是tabbar页  */
export const getIsTabbar = () => {if (!tabBar) {return false}if (!tabBar.list.length) {// 通常有tabBar的话,list不能有空,且至少有2个元素,这里其实不用处理return false}const lastPage = getLastPage()const currPath = lastPage.routereturn !!tabBar.list.find((e) => e.pagePath === currPath)
}/*** 获取当前页面路由的 path 路径 和 redirectPath 路径* path 如 ‘/pages/login/index’* redirectPath 如 ‘/pages/demo/base/route-interceptor’*/
export const currRoute = () => {const lastPage = getLastPage()const currRoute = (lastPage as any).$page// console.log('lastPage.$page:', currRoute)// console.log('lastPage.$page.fullpath:', currRoute.fullPath)// console.log('lastPage.$page.options:', currRoute.options)// console.log('lastPage.options:', (lastPage as any).options)// 经过多端测试,只有 fullPath 靠谱,其他都不靠谱const { fullPath } = currRoute as { fullPath: string }// console.log(fullPath)// eg: /pages/login/index?redirect=%2Fpages%2Fdemo%2Fbase%2Froute-interceptor (小程序)// eg: /pages/login/index?redirect=%2Fpages%2Froute-interceptor%2Findex%3Fname%3Dfeige%26age%3D30(h5)return getUrlObj(fullPath)
}const ensureDecodeURIComponent = (url: string) => {if (url.startsWith('%')) {return ensureDecodeURIComponent(decodeURIComponent(url))}return url
}
/*** 解析 url 得到 path 和 query* 比如输入url: /pages/login/index?redirect=%2Fpages%2Fdemo%2Fbase%2Froute-interceptor* 输出: {path: /pages/login/index, query: {redirect: /pages/demo/base/route-interceptor}}*/
export const getUrlObj = (url: string) => {const [path, queryStr] = url.split('?')// console.log(path, queryStr)if (!queryStr) {return {path,query: {},}}const query: Record<string, string> = {}queryStr.split('&').forEach((item) => {const [key, value] = item.split('=')// console.log(key, value)query[key] = ensureDecodeURIComponent(value) // 这里需要统一 decodeURIComponent 一下,可以兼容h5和微信y})return { path, query }
}
/*** 得到所有的需要登录的pages,包括主包和分包的* 这里设计得通用一点,可以传递key作为判断依据,默认是 needLogin, 与 route-block 配对使用* 如果没有传 key,则表示所有的pages,如果传递了 key, 则表示通过 key 过滤*/
export const getAllPages = (key = 'needLogin') => {// 这里处理主包const mainPages = [...pages.filter((page) => !key || page[key]).map((page) => ({...page,path: `/${page.path}`,})),]// 这里处理分包const subPages: any[] = []subPackages.forEach((subPageObj) => {// console.log(subPageObj)const { root } = subPageObjsubPageObj.pages.filter((page) => !key || page[key]).forEach((page: { path: string } & Record<string, any>) => {subPages.push({...page,path: `/${root}/${page.path}`,})})})const result = [...mainPages, ...subPages]// console.log(`getAllPages by ${key} result: `, result)return result
}/*** 得到所有的需要登录的pages,包括主包和分包的* 只得到 path 数组*/
export const getNeedLoginPages = (): string[] => getAllPages('needLogin').map((page) => page.path)/*** 得到所有的需要登录的pages,包括主包和分包的* 只得到 path 数组*/
export const needLoginPages: string[] = getAllPages('needLogin').map((page) => page.path)

3.需要登录页面配置

<route lang="json5">
{style: {navigationBarTitleText: '办公',},needLogin: true,
}
</route>
<template><view class="bg-white overflow-hidden pt-2 px-4"><view>123</view></view>
</template><script setup lang="ts"></script><style lang="scss"></style>

能在组件中配置页面的信息,主要得益于@uni-helper/vite-plugin-uni-pages 插件的功劳,该插件由 uni-helper 官方团队开发,可参考uni 插件 | unibest。

4.登录按钮功能

// 登录系统 一进系统就需要登录
const handleLogin = async () => {const loginRes = await loginApi.login(loginForm)console.log(loginRes)setAccessToken(loginRes.data.accessToken)setRefreshToken(loginRes.data.refreshToken)// 获取路由路径 进行跳转const fullPath = currRoute()console.log(fullPath)uni.redirectTo({ url: fullPath.query.redirect })
}

登录按钮就是获取登录数据,存储token,重定向至原来访问的界面。

4.功能展示

uni-app登录验证

5.写在最后

本文首先感谢unibestuniapp 开发框架,在unibest项目基础上,添加了一些小的功能,基本能满足路由跳转时的拦截,为后续业务的权限管理打下坚实基础。

本文如有疏漏之处,欢迎批评指正。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/diannao/43547.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Python地震波逆问题解构算法复杂信号分析

&#x1f3af;要点 &#x1f3af;时域、时频域以及时间和频率相关联偏振特性分析三种算法 | &#x1f3af;时域波参数估计算法 | &#x1f3af;机器学习模型波形指纹分析算法 | &#x1f3af;色散曲线和频率相关波分析算法 | &#x1f3af;动态倾斜校正算法 | &#x1f3af;声…

【JS|第21期】JavaScript模块化:深入解析三种文件暴露方式

日期:2024年7月6日 作者:Commas 签名:(ง •_•)ง 积跬步以致千里,积小流以成江海…… 注释:如果您觉得有所帮助,帮忙点个赞,也可以关注我,我们一起成长;如果有不对的地方,还望各位大佬不吝赐教,谢谢^ - ^ 1.01365 = 37.7834;0.99365 = 0.0255 1.02365 = 1377.4083…

前后端项目部署方案汇总

前端项目 1、本地打包部署 # 本地打包部署到线上服务器 npm run build && \ rsync -r ./dist/* root127.0.0.1:/www/www.demo.com/www2、服务器端打包部署 步骤 拉取代码 -> 安装依赖 -> 打包编译 -> 拷贝到运行目录 -> 发送成功消息shell命令 git pu…

新手小白报考学习PMP会遇到哪些“坑”?

PMP考试的陷阱实际上与其他大型证书考试差不多&#xff0c;主要是在选择培训机构和各种收费方面会遇到一些坑。 首先&#xff0c;并不是每个人都能经历这些坑&#xff0c;因为PMP考试有一定的门槛。 作为引进国外的考试&#xff0c;报名都有中英文之分&#xff0c;所以先来看…

STM32的 DMA(直接存储器访问) 详解

STM32的DMA&#xff08;Direct Memory Access&#xff0c;直接存储器存取&#xff09;是一种在单片机中用于高效实现数据传输的技术。它允许外设设备直接访问RAM&#xff0c;不需要CPU的干预&#xff0c;从而释放CPU资源&#xff0c;提高CPU工作效率&#xff0c;本文基于STM32F…

[极客大挑战 2019]RCE ME

[极客大挑战 2019]RCE ME <?php error_reporting(0); if(isset($_GET[code])){$code$_GET[code];if(strlen($code)>40){die("This is too Long.");}if(preg_match("/[A-Za-z0-9]/",$code)){die("NO.");}eval($code); } else{highlight_f…

(附源码)c#+winform实现远程开机(广域网可用)

实现逻辑 利用UDP协议发送特定格式的魔术包&#xff0c;以远程唤醒具有特定MAC地址的目标计算机。目标计算机的BIOS和网络配置需要支持Wake-on-LAN&#xff08;WOL&#xff09;功能&#xff0c;并且需要在目标计算机上配置正确的网络唤醒设置。 源码在最后 准备工作 进入Bio…

力学有限元的基石:虚功原理的推导

推导虚功方程的过程 弹性力学的平衡方程 在张量形式中&#xff0c;平衡方程为&#xff1a; ∇ ⋅ σ b 0 \nabla \cdot \sigma b 0 ∇⋅σb0 用下标表示为&#xff1a; ∂ σ i j ∂ x j b i 0 \frac{\partial \sigma_{ij}}{\partial x_j} b_i 0 ∂xj​∂σij​​b…

知识图谱入门笔记

自学参考&#xff1a; 视频&#xff1a;斯坦福CS520 | 知识图谱 最全知识图谱综述 详解知识图谱的构建全流程 知识图谱构建&#xff08;概念&#xff0c;工具&#xff0c;实例调研&#xff09; 一、基本概念 知识图谱&#xff08;Knowledge graph&#xff09;&#xff1a;由结…

Redis管理禁用命令

在redis数据量比较大时&#xff0c;执行 keys * &#xff0c;fluashdb 这些命令&#xff0c;会导致redis长时间阻塞&#xff0c;大量请求被阻塞&#xff0c;cpu飙升&#xff0c;严重可能导致redis宕机&#xff0c;数据库雪崩。所以一些命令在生产环境禁止使用。 Redis 禁用命令…

【C语言】指针(3):探索-不同类型指针变量

目录 一、字符指针变量 二、数组指针变量 三、二维数组传参的本质 四、函数指针变量 4.1 函数指针变量 4.2 函数指针变量的使用 4.3 函数指针变量的拓展 五、函数指针数组 六、转移表的应用 通过深入理解指针&#xff08;1&#xff09;和深入理解指针&#xff08;2&am…

67.SAP FICO-凭证类型学习

目录 SAP凭证类型 凭证类型的作用 - OBA7 SAP默认的凭证类型更改 FI相应事务代码默认凭证类型 - OBU1 对FB50、60、70默认凭证类型的更改 - OBZO 后勤货物移动默认凭证类型 - OMBA 发货凭证类型 收货凭证类型 自动移动凭证类型 存货盘点凭证类型 发票默认的凭证类…

深度学习Day-24:ResNeXt-50算法思考

&#x1f368; 本文为&#xff1a;[&#x1f517;365天深度学习训练营] 中的学习记录博客 &#x1f356; 原作者&#xff1a;[K同学啊 | 接辅导、项目定制] 要求&#xff1a; 阅读给出代码&#xff0c;判断是否存在错误&#xff0c;正确与否都请给出你的思考&#xff1b;查找…

如何减少开发过程中的bug-数据库篇

1.1慢查询 1.1.1 是否命中索引 提起慢查询&#xff0c;我们马上就会想到加索引。如果一条SQL没加索引&#xff0c;或者没有命中索引的话&#xff0c;就会产生慢查询。 索引哪些情况会失效&#xff1f; 查询条件包含or&#xff0c;可能导致索引失效 如果字段类型是字符串&am…

LeetCode 0724.寻找数组的中心下标:前缀和(时空复杂度O(n)+O(1))

title: 724.寻找数组的中心下标 date: 2024-07-08 13:22:58 tags: [题解, LeetCode, 简单, 数组, 前缀和] 【LetMeFly】724.寻找数组的中心下标&#xff1a;前缀和&#xff08;时空复杂度O(n)O(1)&#xff09; 力扣题目链接&#xff1a;https://leetcode.cn/problems/find-pi…

数据结构--二叉树相关习题5(判断二叉树是否是完全二叉树 )

1.判断二叉树是否是完全二叉树 辨别&#xff1a; 不能使用递归或者算节点个数和高度来判断。 满二叉树可以用高度和节点来判断&#xff0c;因为是完整的。 但是完全二叉树前面是满的&#xff0c;但是最后一层是从左到右连续这种 如果仍然用这种方法的话&#xff0c;如下图…

暑期备考2024小学生古诗文大会:吃透真题和知识点(持续)

2024年上海市小学生古诗文大会的自由报名初赛将于10月19日&#xff08;星期六&#xff09;正式开始&#xff0c;还有3个多月的时间。 为帮助孩子们备考&#xff0c;我持续分享往年上海小学生古诗文大会真题&#xff0c;这些题目来自我去重、合并后的1700在线题库&#xff0c;每…

加密与安全_密钥体系的三个核心目标之完整性解决方案

文章目录 Pre机密性完整性1. 哈希函数&#xff08;Hash Function&#xff09;定义特征常见算法应用散列函数常用场景散列函数无法解决的问题 2. 消息认证码&#xff08;MAC&#xff09;概述定义常见算法工作原理如何使用 MACMAC 的问题 不可否认性数字签名&#xff08;Digital …

SketchUp Pro 2024:现代科技之诗意体验

在那遥远的唐朝&#xff0c;李白曾以诗酒为伴&#xff0c;游历山川&#xff0c;挥洒才情。而今&#xff0c;若李白穿越时空&#xff0c;手握现代科技之利器——SketchUp Pro 2024&#xff0c;定会以诗意之笔&#xff0c;描绘这款软件的神奇与魅力。 初识SketchUp Pro 2024 初…

Vue Router:History 模式 vs. Hash 模式

在开发 SPA&#xff08;单页应用程序&#xff09;时&#xff0c;路由管理是不可或缺的一部分。Vue.js 框架中的 Vue Router 提供了两种主要的路由模式&#xff1a;History 模式和 Hash 模式。理解这两种模式的区别及其实现方式&#xff0c;对于开发和部署 Vue 应用至关重要。 …